babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5实现,从而在浏览器或者其他环境运行。这意味着可以用es6的方式编写程序,而不用担心现有环境是否支持es6.
Babel的配置文件是.babelrc,存放在项目的根目录下。使用 Babel的第一步就是配置这个文件
该文件用来设置转码规则和插件,基本格式如下:
{ "presets":[], "plugins":[] } presets 字段设定转码规则,官方提供以下的规则集,可以根据需要进行安装。
# 最新转码规则:
$ npm install--save-dev babel-preset-latest#
react 转码规则:
$ npm install --save-dev babel-preset-react#
不同阶段语法提案的转码规则(共有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
1. 配置文件.babelrc
然后,将这些规则加入.babelrc中:
{
"preset":[
"latest",
"react",
"stage-2"
],
"plugins":[]
}
注意的是:要使用以下所有babel工具和模块,都必须先写好.babelrc
2.命令行转码 babel-cli
Babel提供babel-cli工具,用于命令行转码
(1) 全局安装: npm install --global babel-cli
在全局环境下进行babel转码。这意味着,如果项目要运行,全局环境中必须有Babel,也就是说项目对环境产生了依赖。另一方面,这样做也无法支持不同的醒目使用不同版本的Babel
基本用法:
// 转码结果输出
babel example.js
// 转码结果写入一个文件
babel example.js --out-file compiled.js
babel example.js -o compiled.js
// 整个目录转码
babel src --out-dir lib
babel src -d lib
// -s 参数生成source map文件
babel src -d lib -s
(2) 项目中安装babel-cli
安装:npm install --save-dev babel-cli
再改写package.json
{
...
"devDependencies":{
"babel-cli":"^6.0.0"
}
}
3 babel-node
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境(交互式解析器)。可以直接运行ES6代码
babel-node 不用单独安装,而是随babel-cli一起安装,执行babel-node可以进入REPL环境
babel-node可以直接运行ES6脚本:
babel-node es6.js
babel-node也可以安装在项目中:npm install --save-dev babel-cli
然后改写package.json
{
"scripts":{
"secript-name":"babel-node script.js"
}
}
// 使用babel-node 替代node,这样script.js本身就不用了进行任何转码处理
4. babel-register
babel-register模块改写了require命令,为他加上了一个钩子。此后,每当使用require加载后缀为.js .jsx .es .es6的文件时,就会先用Babel进行转码。
安装: npm install --save-dev babel-register
require("./index.js");
这样就不用了手动对index.js进行转码了。
注意:babel-register只会对require命令加载的文件进行转码,而不会对当前文件进行转码。另外由于它是实时转码,所以只适合在开发环境中使用。
5.babel-core
有些代码可能需要调用babel的API进行转码,就要用babel-core模块
安装: npm install babel-core --save
在项目中调用babel-core了:
var babel=require('babel-core')
关于配置对象options的内容,可以参考官方文档,地址是 babeljs.io/docs/usage/options/
6.babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,如Iterator,generator,Set,Maps,Proxy,Reflect,Symbol,Promise等全局对象,以及一些定义在全局对象上的方法(如Object.assign)都不会转码。
安装:npm install --save babel-polyfill
在头部引入
import "babel-polyfill" // 或: require("babel-polyfill")
Babel默认不转码的API非常多,详情见babel-plugin-transform-runtime模块的definitions.js(https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/runtime-corejs3-definitions.js):