Babel转码快速入门
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 就不需要做任何转码处理了。