manlili blog

ES6转换工具-babel介绍

发表于 | 分类于

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

1
2
3
4
5
6
7
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
  return item + 1;
});

babel安装

要使用Babel， 我们需要nodeJS的环境和npm， 主要安装了nodeJS， npm就默认安装了 ， 现在安装nodeJS很简单了， 直接下载安装就好了；

第一步

在使用Babel之前，我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：

1
npm -g install es-checker

es-checker安装完毕以后，命令行执行：es-checker
本人的电脑执行完出现以下的情况：
图

当然还有方法二，这个比较简单一点，直接用在线网站检测，测试浏览器是否支持ES6

第二步

所以我们来安装babel吧，有了babel， 能够使用更多高级词法！
你可以根据babel官方网站安装步骤安装,或者跟着我的教程安装，(点击我跳转到官方网站地址)[http://babeljs.io/docs/setup/] 。

首先新建一个工作目录， 然后创建一个package.json的文件，内部内容为：

1
2
3
4
5
6
{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
  }
}

然后再打开cmd(命令行), 在工作目录下执行命令安装babel-cli：

1
npm  --save-dev install babel-cli

再安装一个全局的babel-cli：

1
npm -g  install babel-cli

接着在工作目录创建一个名字为.babelrc的文件，但是在windows系统中，不允许直接右键建立没有文件名的文件，可以通过cmd命令行创建：在当前文件夹打开cmd并键入命令：

1
type nul>.babelrc

即可在当前目录下建立文件.babelrc，接着在文件中写入：

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

接着安装babel-preset-es2015，还是工作目录， 然后再安装babel-preset-es2015：

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

到目前为止babel算是安装完毕了.

测试是否安装正确

创建一个test.js的文件， 键入内容：

1
[1,2,3].map(x => x*x);

然后打开gitBash,输入命令babel test.js，出现：

1
2
3
4
5
"use strict";
[1, 2, 3].map(function (x) {
  return x * x;
});

babel拓展知识

命令行转码babel-cli

Babel提供babel-cli工具，用于命令行转码。安装方法上面已经说过了，这里主要介绍用法。
基本用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 转码结果输出到标准输出
$ 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

babelrc配置文件

Babel的配置文件是.babelrc，存放在项目的根目录下。该文件用来设置转码规则和插件，基本格式如下。

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

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

1
2
3
4
5
6
7
8
9
10
11
# 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

一般我们使用的es6转码规则为：

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

如果没有Babel的配置文件是.babelrc文件，也可以使用babel命令，比如创建一个test.js的文件， 键入内容：

1
[1,2,3].map(x => x*x);

然后打开gitBash,输入命令如下：

1
babel test.js --presets es2015

也会出现：

1
2
3
4
5
"use strict";
[1, 2, 3].map(function (x) {
  return x * x;
});

后面的参数–presets es2015表示使用该插件进行编译，如果不写上转换是没有效果的。
如果每次都这么写很麻烦，建议还是创建个babelrc配置文件。

babel-node

babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。
它不用单独安装，而是随babel-cli一起安装。
命令是:

1
babel-node

用大白话来说就是进入console控制台.

babel-register

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

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

使用时，必须首先加载babel-register:

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

然后，就不需要手动对index.js转码了。
需要注意的是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。

babel-core

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。
关于babel的API,你可以点击这里
安装命令：

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

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 }

下面来看个例子：

1
2
3
4
5
6
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['latest']
  })
  .code;

babel-polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
安装命令如下。

1
npm install --save babel-polyfill

然后，在脚本头部，加入如下一行代码。

1
2
3
import 'babel-polyfill';
// 或者
require('babel-polyfill');

babel常用的命令

1、转换es6.js文件并在当前命名行程序窗口中输出

1
babel es6.js

2、将es6.js转换后输出到es5.js文件中（使用 -o 或 –out-file ）

1
2
3
4
5
6
7
8
babel es6.js -o es5.js
babel es6.js --out-file es5.js
``` 
3、实时监控es6.js一有变化就重新编译（使用 -w 或 --watch ）
```bash
babel es6.js -w --out-file es5.js
babel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出到lib文件夹中（使用 -d 或 –out-dir ）

1
2
babel src -d lib
babel src --out-dir lib

5、编译整个src文件夹并输出到一个文件中

1
babel src --out-file es5.js

6、直接输入babel-node命令，可以在命令行中直接运行ES6代码

1
babel-node

请我喝杯果汁吧！