「ES6笔记」Babel

.babelrc

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

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

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

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ 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

然后讲这些规则加入.babelrc

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

babel-cli

npm install babel-cli --save-dev
该工具用于命令行转码
基本用法：

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

使用npm script 构建

把node-cli安装在项目中，然后改写package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

babel-node

babel-node给node包上一层外衣，使得可以像使用node那样执行js文件，这个过程是运行时编译。

babel-node index.js

babel-node随着babel-cli安装。

babel-register

npm install babel-register --save-dev

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

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

这个过程是运行时编译，只适用于开发环境中

babel-core

npm install --save-dev babel-core
babel-core可以使在代码中使用babel的API

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

babel-polyfill

由于babel默认转换的是语法，而一些ES6环境扩展的API，却没有转换。像Array.from、String.padStart并不会转换，如果要使用到这部分API，那就需要在文件中引入babel-polyfill

// script.js
require("babel-polyfill");
const name = 'jc';
console.log(name.padStart(10));

以上脚本会被转换成

// complied.js
"use strict";
require("babel-polyfill");
var name = 'jc';
console.log(name.padStart(10));

直接在低版本Node环境中执行转换后的脚本，会正常运行。
注意的是，babel-node script.js会报only one instance of babel-polyfill is allowed错误

babel-browser

在浏览器中运行时编译，可以引入babel-core@5 文件中的 browser.min.js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

注意的是，在Babel6.0之后中，babel-core不会再提供browser.min.js

babel-standalone

babel-standalone是给那些非Node.js环境中使用最新的JavaScript而服务的。
这部分描述见于babel-standalone;

使用babel-standalone可以取代babel-browser的方案，在脚本中引入

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

babel in mocha

在使用mocha的时候，除了可以使用babel-register，也可以使用以下方式
在package.json中添加：

"scripts": {
  "test": "mocha --ui qunit --compilers js:babel-core/register"
}

上面命令中，--compilers参数指定脚本的转码器，规定后缀名为js的文件，都需要使用babel-core/register先转码。

babel with webpack

使用babel-loader可以在webpack打包过程中编译ES2015的代码。
安装以下依赖

npm install babel-core babel-loader babel-preset-2015 webpack --save-dev

然后在项目中新建webpack.config.js

module.exports = {
  entry: "./src/app.js",
  output: {
    path: './bin',
    filename: 'app.bunble.js'
  },
  module: {
    loaders: [{
      loader: 'babel-loader',
      test: /.js$/,
      exclude: /node_modules/
    }]
  }
}

通过配置loaders，把所用.js后缀的文件通过babel编译。
在这里为了避免编译依赖模块的代码，剔除node_modules文件夹。