素材巴巴 > 程序开发 >

babel的基本使用方法

程序开发 2023-09-24 08:37:32

babel编译器

1.babel的功能

在这里插入图片描述

2.babel的使用特点

(1)babel本身可以编译ES6的大部分语法;
(2)ES6 Module语法一般使用webpack来处理;
(3)babel本身不能编译ES6新增的API,需要借助其他模块。

3.babel的使用方式

(1)查询babel官网的setup页面:babel官网的setuo页面;
(2)一般在命令行工具(CLI)或者webpack中使用babel。

4.使用babel的流程

(1)安装node.js(携带安装npm),node.js官网:nodejs官网;下载对应版本的node.js,安装;验证node和npm皆成功可进行下一步;
(2)初始化项目,生成package.json文件;
具体操作:使用cmd定位到具体需要操作文件夹下,输入指令:npm init

(3)安装babel需要的包:
@babel/core、@babel/cli、@babel/preset-env
安装指令:

npm install --save-dev @babel/core @babel/cli @babel/preset-env
 

(4)在package.json中自行添加执行编译的命令:
在这里插入图片描述
(5)创建配置文件.babelrc,并配置:
配置内容:

{"presets":["@babel/preset-env"]}
 

(6)编译并测试

npm run build
 

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。