对于E6的一些特性,因为目前所有的引擎并没有完全支持,比如说E6模块规范用到的export / import语句。那么,为了在浏览器或者node环境中能够执行ES6的代码,需要将ES6按照一定的规则转码成ES5。Babel工具就是做这个事情的。
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码。
Babel官网:babeljs.io/
这里介绍在node环境中支持ES6代码的过程:
- 安装babel-cli工具
- 配置.babelrc配置文件
- 通过babel-node命令终端执行js文件
- 配置packjson文件,通过npm script命令执行js文件
babel-cli工具
Babel提供的babel-cli工具,用于命令行转码
- 全局安装
npm install --global babel-cli
- 项目中安装
npm install --save-dev babel-cli
或者在package.json文件中配置后执行npm install
{
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
.babelrc配置文件
该文件用来设置转码规则和插件,基本格式如下
{
"presets": [],
"plugins": []
}
presets字段用于设定转码规则。 这里让babel-cli使用babel-preset-es2015。
npm install babel-preset-es2015 --save
改写.babelrc配置文件内容如下:
{
"presets": [
"es2015"
],
"plugins": []
}
babel-node命令
babel-node命令是babel-cli工具自带的一个命令,随babel-cli一起安装。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
测试ES6:如果babel-cli工具和.babelrc文件按照上述步骤配置好了,对于如下两个文件:
// export_demo.js
export const str = "blablabla~"
export function log(sth) {
return sth;
}
// import_demo.js
import { str, log } from './export_demo';
console.log(str)
console.log(log("hahaha~"))
在命令行下输入指令
babel-node import_demo.js
// 输出结果
// blablabla~
// hahaha~
如果想使用npm script来执行命令, 改写package.json文件
{
"scripts": {
"babel": "babel-node import_demo.js"
}
}
命令行下输入如下指令就可以了
npm run babel
参考文档
{
// ...
//"devDependencies": {
// "babel-cli": "^6.0.0"
// },
"scripts": {
"build": "babel src -d lib"
},
}
其他相关工具
es-checker
可以使用es-checker来检测当前Node.js对ES6的支持情况。 安装
npm install -g es-checker
使用
es-checker
babel-register
- 每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
- 使用时,必须首先加载babel-register。
- 只会对require命令加载的文件转码,而不会对当前文件转码。 安装
npm install --save-dev babel-register
使用
require("babel-register");
require("./index.js");
babel-core
npm install babel-core --save
使用
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
.transform(es6Code, {
presets: ['es2015']
})
.code;
babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill。
npm install --save babel-polyfill
使用
require('babel-polyfill')
babel在线转换器
Babel提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行。
参考文档
www.ruanyifeng.com/blog/2016/0… www.kancloud.cn/digest/babe…