ES6转码ES5环境配置

配置文件.babelrc

1、Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。配置文件如下：

{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
}

2、安装转码规则

npm install --save-dev babel-preset-stage-2

命令行转码babel-cli

1、为了使项目脱离对环境的依赖，故将其安装到项目中，命令如下：

npm install --save-dev babel-cli

2、修改package.json文件，如下

{ 
  "devDependencies": {
    "babel-cli": "^6.10.3",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "3.10.0"
  },
  "scripts": {
    "build": "babel ESAPP -d test"
  }
}

运行进行转码-手动转码

npm run build

测试编写的ES6代码是否正确

babel-cli工具自带一个babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

它不用单独安装，而是随babel-cli一起安装。然后，执行babel-node就进入 REPL 环境。

babel-register

babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。

$ npm install --save-dev babel-register

使用时，必须首先加载babel-register。

require("babel-register");
require("./index.js");

然后，就不需要手动对index.js转码了。

需要注意的是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。