使用Babel转码

使用Babel转码

Babel转码器就是将 ES6 代码转为 ES5 代码

 // 转码前input.map(item => item + 1);// 转码后input.map(function (item) {  return item + 1;});

1.怎样使用Babel转码?
全局作用域的情况
步骤一：先在项目的根目录里创建好.babelrc文件，(这里记住，一定要手动创建一个文件)
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

    {        "presets": [],        "plugins": []    }

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。但是要按照顺序安装

    # 最新转码规则    $ npm install --save-dev babel-preset-es2015    # 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    然后，将这些规则加入.babelrc      {            "presets": [            "es2015",            "react",            "stage-2"            ],            "plugins": []        }

步骤二：利用babel-cli工具的命令行转码
Babel提供babel-cli工具，用于命令行转码，安装命令如下:

    $ npm install --global babel-cli

基本用法：创建一个es6文件：01.js，(x => x*2)(1);

    //转码输出    $ babel 01.js      (function (x) {        return x * 2;      })(1);    # 转码结果写入一个文件    # --out-file 或 -o 参数指定输出文件    $ babel 01es6.js --out-file 01es5.js     #或者    $ babel 01es6.js -o 01es5.js     # 如果需要将整个目录转码    # --out-dir 或 -d 参数指定输出目录    $ mkdir es6     #创建文件 01.js 02.js 03.js    $ babel es6 --out-dir es5    #或者    $balel es6 -d es5    # -s 参数生成source map文件    babel es6 -d sMap -s

上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。
另一方面，这样做也无法支持不同项目使用不同版本的 Babel。解决办法是将babel-cli安装在项目中:
第一步：和全局情况的步骤一一样，先在项目的根目录里创建好.babelrc文件然后。。。。
# npm install --save-dev babel-cli，改写babel-cli目录里面的package.json

{  // ...  "devDependencies": {    "babel-cli": "^6.0.0"  },  "scripts": {    "build1": "babel 01es6.js -o 01es5.1.js",    "build2": "babel es6 -d es5.1"  }}

上面如果执行那个项目，就应该将哪个项目放入”scripts”键所对应的值里，
build1就是将根目录中的01es6.js文件转码为01es5.1.js;
build1就是将根目录中的es6目录转码为es5.1目录
第三步：将上面改写的package.json文件复制到和项目的根目录，也就是你当前操作的目录
转码的时候，就执行下面的命令。

 $ npm run build1 $ npm run build2

2.babel-cli工具babel-node
babel-cli 工具自带一个babel-node命令，提供一个支持运行es6的REPL环境
不用单独安装，而是随babel-cli一起安装。然后，执行babel-node就进入REPL环境,
使用babel-node替代node，这样script.js本身就不用做任何转码处理。

    $ babel-node    > (x => x * 2)(1)    2    或者    $ babel-node 01es6.js    2

如果babel-cli不是全局安装，那么就要安装在项目中，这时候如果需要执行哪个项目就要在package里面配置哪个文件或者目录：

{  "scripts": {    "xx": "babel-node yy.js"  }}执行方法：$ babel-node xx

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

  $ npm install --save-dev babel-register

例如我新建一个01es6.1.js文件，然后先引进转码后的01es6.js文件，
注意：01es6.1.js文件并没有转码，只会对require命令加载的文件转码。
由于它是实时转码，所以只适合在开发环境使用。

    require("babel-register");    require("./01es6.js");    (x => x*2)(1);

4.babel-core
如果某些代码需要调用 Babel 的 API 进行转码，就要使用babel-core模块。安装命令如下：

    $npm install babel-core --save

安装之后到babel-core目录下的 README.md文件里查看

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> <script type="text/babel">    // 你的 ES6 源码</script>

网页实时将 ES6 代码转为 ES5，对性能会有影响。
7.以Babel配合Browserify转换代码。
首先，安装babelify模块

    $ npm install --save-dev babelify babel-preset-latest

8.traceur转换
作为命令行工具使用时，Traceur 是一个 Node 的模块，首先需要用 Npm 安装。

    $ npm install -g traceur    $ traceur 01es6.js -o 01es5.js