本地安装
$ npm install --save-dev babel-cli
编译插件
ES2015转码规则
npm install --save-dev babel-preset-es2015
React ES2015转码规则
$ 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
兼容export default {} 支持
$ npm install --save-dev babel-plugin-add-module-exports
根目录创建一个名为 .babelrc 的文件
presets 设置转码规则
plugins 添加插件
{
"presets": [
"es2015", "react", "stage-2"
] ,
"plugins": [
"add-module-exports"
]
}
babel-polyfill插件
Babel默认只转换新的JavaScript句法(syntax
),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。Babel
默认不转码的API非常多,详细清单可以查看 definitions.js
为了完整使用 ES6的 API ,支持浏览器缺失API:
$ npm install -save-dev babel-polyfill
然后,在需要使用的文件的顶部引入
import "babel-polyfill"
node.js 中:
require('babel-polyfill');
webpack.config.js 中:
module.exports = {
entry: ['babel-polyfill', './app/js']
}
- 为了避免babel在编译中输出重复,使用babel-runtime
npm install --save-dev babel-plugin-transform-runtime
.babelrc添加
{
"plugins": ["transform-runtime"]
}
详见官方文档
配置浏览器环境
Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core模块获取。
$ npm install babel-core@5
webpack打包,webpack加载器为我们处理各种文件。我们将选用一个特殊的babel-loader来将我们的ES6代码转译为ES5代码
$ npm install babel-loader
作者:JackfengGG
链接:https://www.jianshu.com/p/388e9e202d9a
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。