- 本地安装
$ 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
