Babel转码快速入门

阅读基础：能在node环境下使用npm/yarn

Babel 可以将 ES6 代码转为 ES5 代码，从而可以在不支持 ES6 的环境运行，下面是一个例子：

//转码前
a=>a+1;

//转码后
(function (a) {
  return a + 1;
});

//上面的代码使用了箭头函数，Babel 将其转为普通函数。

Babel 虽然支持浏览器环境，但网页实时将 ES6 代码转为 ES5 代码会对网页性能有影响，所以我们需要使用构建工具在生产环境将 ES6 代码进行提前转码。

配置babel

Babel 只能转换语法（如箭头函数），不支持新的全局变量，比如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等。
如果想让这些方法运行，必须使用 babel-polyfill ,为当前环境提供该方法。

babel、babel-polyfill 安装：

$ yarn add babel-preset-env --dev
$ yarn add babel-polyfill --dev

安装完成后，我们可以通过.babelrc文件或者package.json文件对 babel 进行配置；配置文件可以根据具体的需求进行配置：英文文档 中文文档。

• 方法一：新建 .babelrc 文件，并添加以下字段：

{
  "presets": [["env",{"useBuiltIns": true}]]
}

• 方法二：在 package.json 文件中增加字段：

{
  // ...
  "babel": {
    "presets": [["env",{"useBuiltIns": true}]]
  }
}

babel-cli 命令行转码

Babel 提供 babel-cli 工具，可用于命令行转码，工具安装：

$ yarn add babel-cli --dev

babel-cli 基本用法：

# 输出转码结果
$ babel index.js

# 单文件转码
# --out-file 或 -o 参数指定输出文件
$ babel index.js --out-file compiled.js
$ babel index.js -o compiled.js

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

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

我们可以在 package.json 文件中增加脚本：

{
  // ...
  "scripts": {
    "build": "babel src -d build"
  },
}

转码的时候，就执行下面的命令。

$ yarn run build

babel-node

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

执行 babel-node 就可以进入REPL环境：

$ babel-node
> (x => x * 2)(1)
2

babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js，然后直接运行。

$ babel-node es6.js
2

我们可以改写 package.json：

{
  // ...
  "scripts": {
    "script-name": "babel-node test.js"
  }
}

用 babel-node 代替 node, test.js 就不需要做任何转码处理了。