搭建react环境之babel配置

本地安装

  $ 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']
    }    

1. 为了避免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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。