babel使用

babel-handbook

介绍

Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用(并创建)下一代的 JavaScript,以及下一代的 JavaScript 工具。 作为一种语言,JavaScript 在不断发展,新的标准/提案和新的特性层出不穷。 在得到广泛普及之前,Babel 能够让你提前(甚至数年)使用它们。

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译(transpiling,是一个自造合成词,即转换+编译。以下也简称为转译)。

安装 Babel

由于 JavaScript 社区没有统一的构建工具、框架、平台等等,因此 Babel 正式集成了对所有主流工具的支持。 从 Gulp 到 Browserify,从 Ember 到 Meteor,不管你的环境设置如何,Babel 都有正式的集成支持。

本手册的目的主要是介绍 Babel 内建方式的安装,不过你可以访问交互式的安装页面来查看其它的整合方式。

babel-cli

Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。

让我们先全局安装它来学习基础知识。

1
$ npm install --global babel-cli

我们可以这样编译我们的第一个文件

1
$ babel my-file.js

这将把编译后的结果直接输出至终端。使用 --out-file 或着 -o 可以将结果写入到指定的文件。

1
2
3
$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js

如果我们想要把一个目录整个编译成一个新的目录,可以使用 --out-dir 或者 -d

1
2
3
$ babel src --out-dir lib
# 或
$ babel src -d lib

在项目内运行 Babel CLI

尽管你可以把 Babel CLI 全局安装在你的机器上,但是按项目逐个安装在本地会更好。

有两个主要的原因。

  1. 在同一台机器上的不同项目或许会依赖不同版本的 Babel 并允许你有选择的更新。
  2. 这意味着你对工作环境没有隐式依赖,这让你的项目有很好的可移植性并且易于安装。

要在(项目)本地安装 Babel CLI 可以运行:

1
$ npm install --save-dev babel-cli

注意: 因为全局运行 Babel 通常不是什么好习惯所以如果你想要卸载全局安装的 Babel 的话,可以运行:

1
$ npm uninstall --global babel-cli

安装完成后,你的 package.json 应该如下所示:

1
2
3
4
5
6
7
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.0.0"
}
}

现在,我们不直接从命令行运行 Babel 了,取而代之我们将把运行命令写在 npm scripts 里,这样可以使用 Babel 的本地版本。

只需将 "scripts" 字段添加到你的 package.json 文件内并且把 babel 命令写成 build 字段。.

1
2
3
4
5
6
7
8
9
10
  {
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.0.0"
}
}

现在可以在终端里运行:

1
npm run build

这将以与之前同样的方式运行 Babel,但这一次我们使用的是本地副本。

babel-register

下一个常用的运行 Babel 的方法是通过 babel-register。这种方法只需要引入文件就可以运行 Babel,或许能更好地融入你的项目设置。

但请注意这种方法并不适合正式产品环境使用。 直接部署用此方式编译的代码不是好的做法。 在部署之前预先编译会更好。 不过用在构建脚本或是其他本地运行的脚本中是非常合适的。

让我们先在项目中创建 index.js 文件。

1
console.log("Hello world")

如果我们用 node index.js 来运行它是不会使用 Babel 来编译的。所以我们需要设置 babel-register。.

首先安装 babel-register

1
$ npm install --save-dev babel-register

接着,在项目中创建 register.js 文件并添加如下代码:

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

这样做可以把 Babel 注册到 Node 的模块系统中并开始编译其中 require 的所有文件。

现在我们可以使用 register.js 来代替 node index.js 来运行了。

1
$ node register.js

注意:你不能在你要编译的文件内同时注册 Babel,因为 node 会在 Babel 编译它之前就将它执行了。

1
2
3
require("babel-register");
// 未编译的:
console.log("Hello world!");

babel-node

如果你要用 node CLI 来运行代码,那么整合 Babel 最简单的方式就是使用 babel-node CLI,它是 node CLI 的替代品。

但请注意这种方法并不适合正式产品环境使用。 直接部署用此方式编译的代码不是好的做法。 在部署之前预先编译会更好。 不过用在构建脚本或是其他本地运行的脚本中是非常合适的。

首先确保 babel-cli 已经安装了。

1
$ npm install --save-dev babel-cli

然后用babel-node 来替代node运行所有的代码。

如果用 npm script 的话只需要这样做:

1
2
3
4
5
6
  {
"scripts": {
- "script-name": "node script.js"
+ "script-name": "babel-node script.js"
}
}

要不然的话你需要写全 babel-node 的路径。

1
2
- node script.js
+ ./node_modules/.bin/babel-node script.js

提示:你可以使用 npm-run

babel-core

如果你需要以编程的方式来使用 Babel,可以使用 babel-core 这个包。

首先安装 babel-core

1
$ npm install babel-core
1
var babel = require("babel-core");

字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。

1
2
babel.transform("code();", options);
// => { code, map, ast }

如果是文件的话,可以使用异步 api:

1
2
3
babel.transformFile("filename.js", options, function(err, result) {
result; // => { code, map, ast }
});

或者是同步 api:

1
2
babel.transformFileSync("filename.js", options);
// => { code, map, ast }

要是已经有一个 Babel AST(抽象语法树)了就可以直接从 AST 进行转换。

1
2
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

对于上述所有方法,options 指的都是 http://babeljs.io/docs/usage/options/


配置 Babel

你或许已经注意到了,目前为止通过运行 Babel 自己我们并没能“翻译”代码,而仅仅是把代码从一处拷贝到了另一处。

这是因为我们还没告诉 Babel 要做什么。

由于 Babel 是一个可以用各种花样去使用的通用编译器,因此默认情况下它反而什么都不做。你必须明确地告诉 Babel 应该要做什么。

你可以通过安装插件(plugins)或预设(presets,也就是一组插件)来指示 Babel 去做什么事情。

.babelrc

在我们告诉 Babel 该做什么之前,我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始:

1
2
3
4
{
"presets": [],
"plugins": []
}

这个文件就是用来告诉Babel做你要他做的事情的配置文件。

注意:尽管你也可以用其他方式给 Babel 传递选项,但 .babelrc 文件是约定也是最好的方式。

babel-preset-es2015

我们先从让 Babel 把 ES2015(最新版本的 JavaScript 标准,也叫做 ES6)编译成 ES5(现今在大多数 JavaScript 环境下可用的版本)开始吧。

我们需要安装 "es2015" Babel 预设:

1
$ npm install --save-dev babel-preset-es2015

我们修改 .babelrc 来包含这个预设。

1
2
3
4
5
6
  {
"presets": [
+ "es2015"
],
"plugins": []
}

babel-preset-stage-x

JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。

这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳。

以下是4 个不同阶段的(打包的)预设:

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

注意 stage-4 预设是不存在的因为它就是上面的 es2015 预设。

以上每种预设都依赖于紧随的后期阶段预设。例如,babel-preset-stage-1 依赖 babel-preset-stage-2,后者又依赖 babel-preset-stage-3。.

使用的时候只需要安装你想要的阶段就可以了:

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

然后添加进你的 .babelrc 配置文件。

1
2
3
4
5
6
7
  {
"presets": [
"es2015",
+ "stage-2"
],
"plugins": []
}

执行 Babel 生成的代码

即便你已经用 Babel 编译了你的代码,但这还不算完。

babel-polyfill

Babel 几乎可以编译所有时新的 JavaScript 语法,但对于 APIs 来说却并非如此。

比方说,下列含有箭头函数的需要编译的代码:

1
2
3
function addAll() {
return Array.from(arguments).reduce((a, b) => a + b);
}

最终会变成这样:

1
2
3
4
5
function addAll() {
return Array.from(arguments).reduce(function(a, b) {
return a + b;
});
}

然而,它依然无法随处可用因为不是所有的 JavaScript 环境都支持 Array.from

Uncaught TypeError: Array.from is not a function

为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs,Array.from 就是一个例子。

Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和 async functions(异步函数)正常工作。

要使用 Babel polyfill,首先用 npm 安装它:

1
$ npm install --save babel-polyfill

然后只需要在文件顶部导入 polyfill 就可以了:

1
import "babel-polyfill";

babel-runtime

为了实现 ECMAScript 规范的细节,Babel 会使用“助手”方法来保持生成代码的整洁。

由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部,因此你可以把它们统一移动到一个单一的“运行时(runtime)”中去。

通过安装 babel-plugin-transform-runtimebabel-runtime 来开始。

1
2
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

然后更新 .babelrc

1
2
3
4
5
6
  {
"plugins": [
+ "transform-runtime",
"transform-es2015-classes"
]
}

现在,Babel 会把这样的代码:

1
2
3
class Foo {
method() {}
}

编译成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";

let Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
}

_createClass(Foo, [{
key: "method",
value: function method() {}
}]);

return Foo;
}();

这样就不需要把 _classCallCheck_createClass 这两个助手方法放进每一个需要的文件里去了。


配置 Babel(进阶)

大多数人使用 Babel 的内建预设就足够了,不过 Babel 提供了更多更细粒度的能力。

评论

加载中,最新评论有1分钟延迟...