阅读基础:能在node环境下使用npm/yarn
Babel 可以将 ES6 代码转为 ES5 代码,从而可以在不支持 ES6 的环境运行,下面是一个例子:
//转码前
a=>a+1;
//转码后
(function (a) {
return a + 1;
});
//上面的代码使用了箭头函数,Babel 将其转为普通函数。
Babel 虽然支持浏览器环境,但网页实时将 ES6 代码转为 ES5 代码会对网页性能有影响,所以我们需要使用构建工具在生产环境将 ES6 代码进行提前转码。
配置babel
Babel 只能转换语法(如箭头函数),不支持新的全局变量,比如:Iterator
、Generator
、Set
、Maps
、Proxy
、Reflect
、Symbol
、Promise
等。
如果想让这些方法运行,必须使用 babel-polyfill ,为当前环境提供该方法。
babel、babel-polyfill 安装:
$ yarn add babel-preset-env --dev
$ yarn add babel-polyfill --dev
安装完成后,我们可以通过.babelrc
文件或者package.json
文件对 babel 进行配置;配置文件可以根据具体的需求进行配置:英文文档 中文文档。
- 方法一:新建 .babelrc 文件,并添加以下字段:
{
"presets": [["env",{"useBuiltIns": true}]]
}
- 方法二:在 package.json 文件中增加字段:
{
// ...
"babel": {
"presets": [["env",{"useBuiltIns": true}]]
}
}
babel-cli 命令行转码
Babel 提供 babel-cli 工具,可用于命令行转码,工具安装:
$ yarn add babel-cli --dev
babel-cli 基本用法:
# 输出转码结果
$ babel index.js
# 单文件转码
# --out-file 或 -o 参数指定输出文件
$ babel index.js --out-file compiled.js
$ babel index.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir build
$ babel src -d build
# -s 参数生成source map文件
$ babel src -d build -s
我们可以在 package.json 文件中增加脚本:
{
// ...
"scripts": {
"build": "babel src -d build"
},
}
转码的时候,就执行下面的命令。
$ yarn run build
babel-node
babel-cli 工具自带一个 babel-node 命令,提供一个支持 ES6 的 REPL 环境,而且可以直接运行 ES6 代码。
执行 babel-node 就可以进入REPL环境:
$ babel-node
> (x => x * 2)(1)
2
babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js,然后直接运行。
$ babel-node es6.js
2
我们可以改写 package.json:
{
// ...
"scripts": {
"script-name": "babel-node test.js"
}
}
用 babel-node 代替 node, test.js 就不需要做任何转码处理了。