Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
官方手册传送门
https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md
不建议进行全局安装,这样可以保证各个项目独立环境。
1.安装
全局安装
npm install -g babel
npm install -g babel-cli
局部安装
npm install --save-dev babel
npm install --save-dev babel-cli
babel6之后 分离为多个包
babel-cli 命令行
babel-core node api 以及 require hook
babel-polyfill 提供es2015的环境
转化为ES5等需要安装插件,根据需要安装
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
2.使用
2.1命令行转化js文件:
babel es6.js --presets es2015
转码结果输出到命令行
2.2转码结果写入一个文件
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
2.3在项目中可以通过修改 package.json
文件
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
现在,我们不直接从命令行运行 Babel 了,取而代之我们将把运行命令写在 npm scripts 里,这样可以使用 Babel 的本地版本。
只需将 "scripts" 字段添加到你的 package.json 文件内并且把 babel 命令写成 build 字段。.
{
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
现在可以在终端里运行:
npm run build
这将以与之前同样的方式运行 Babel,但这一次我们使用的是本地副本。
3.配置.babelrc配置文件
Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
然后,将这些规则加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
4.babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime
模块的definitions.js文件。
安装命令如下。
npm install --save babel-polyfill
然后只需要在文件顶部导入 polyfill 就可以了:
import "babel-polyfill";