Babel转码快速入门

zhongweinan 2019-06-26

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

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

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

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

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

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

配置babel

Babel 只能转换语法(如箭头函数),不支持新的全局变量,比如:IteratorGeneratorSetMapsProxyReflectSymbolPromise等。
如果想让这些方法运行,必须使用 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 就不需要做任何转码处理了。

相关推荐