Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行。所以你可以用ES6编写,而不用考虑环境支持的问题。
下面是一个例子:
allen.map(item => item + 1);//转码前
allen.map(function (item) {// 转码后
return item + 1;
});
一:命令行转码:
Babel提供babel-cli工具,用于命令行转码。
它的安装命令-------------------cnpm install --global babel-cli
基本用法如下。
# 转码结果输出到标准输出
$ 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
在全局环境下,进行Babel转码。全局环境必须有Babel,解决办法是将babel-cli安装在项目之中。
安装-------------cnpm install --save-dev babel-cli-------------------------然后,改写package.json。
二:babel-node
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
它不用单独安装,而是随babel-cli一起安装。然后,执行babel-node就进入PEPL环境。
babel-node命令可以直接运行ES6脚本
三:babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,
以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
安装命令----cnpm install --save babel-polyfill
因为这是一个 polyfill (它需要在你的源代码之前运行),我们需要让它成为一个 dependency
,
而不是一个 devDependency
.
然后,在脚本头部,加入如下一行代码。
import 'babel-polyfill';
// 或者
require('babel-polyfill');
Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。