如何使用 babel
Pin Young Lv9
  • content
    {:toc}

Babel 用于将 ES6 的代码转化为 ES5,使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel,以及一些相关的配置。

image

学习 Babel 可以通过其手册 Babel handbook。

其中包含多语言版本,分为用户手册插件手册。这是一个很好的学习 Babel 的资料。

babel-cli

在 node 和 npm 环境安装好的前提下,安装 babel,如下:

1
npm install --global babel-cli

安装完成后就可以编译文件了。

1
babel main.js

编译后的文件显示在终端上,可以添加其他命令让它输出到指定文件下:

1
2
3
babel example.js --out-file compiled.js

babel example.js -o compiled.js

或将整个目录编译成一个新的目录:

1
2
3
babel src --out-dir lib

babel src -d lib

但这很麻烦,并且并不是一个很好的解决方案,请看下一节项目内运行 babel-cli。

在项目内运行 babel-cli

初始化项目

1
npm init

再安装 babel-cli

1
npm install --save-dev babel-cli

项目中的package.json应该包含如下内容:

1
2
3
4
5
6
7
{
"name": "learn-es6",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.10.1"
}
}

添加 npm scripts 命令。

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

此时在终端里运行

1
npm run build

还不能成功编译,因为没有配置.babelrc文件。

配置.babelrc

通过配置.babelrc来告诉 babel 来做什么。

在项目的根路径下创建.babelrc文件。然后输入以下内容作为开始:

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

为了让 babel 将 ES2015 转化为 ES5,我们要安装如下:

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

安装完成后在.babelrc中添加参数:

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

现在在项目src/main.js中写一些 ES2015 的代码试试吧。

1
let a = 1

在终端中输入命令

1
npm run build

执行后终端中显示:

1
2
> learn-es6@1.0.0 build c:\gitWorkSpace\learn-es6
> babel src -d lib

然后可以看到目录中出现了lib/main.js

1
2
3
"use strict";

var a = 1;

即编译成功。

配置.jshintrc

若编辑器中安装了 jshint 语法检查的插件。默认对于 ES2015 的代码可能会报错或者警告,看着可能会不爽。我们可以在配置文件中将它设置为允许 ES2015 的模式。

在项目根目录下创建文件.jshintrc。内容如下:

1
2
3
4
{
"asi": true,
"esversion": 2015
}

上述文件我分别设置了,使用无分号模式,es 版本使用 2015。

关于.jshintrc的更详细配置可以参见官方示例:https://github.com/jshint/jshint/blob/master/examples/.jshintrc

好,babel 就说到这里,下面开始进入真正的 ES2015 的学习!