Babel使用指南

本篇围绕gulp记录Babel的使用，其它工具差不多

1、安装gulp-babel

npm install gulp-babel --save-dev

babel的作用是将ES6转换为ES5，所以得指定转换规则是什么，这可以通过presets设置，但是之前还得安装这些规则，如

//使用这个插件，将不再需要使用 es20xx presets 了
npm install babel-preset-env --save-dev

然后看下转换前后的代码

// gulp 配置项
gulp.task('ES6', function() {
    return gulp.src([config.src + 'static/es6/**/*', '!' + config.src + 'static/es6/**/*.min.js'])
        .pipe(babel({
            presets: ['env']
            // plugins: ['transform-runtime']
        }))
        .pipe(gulp.dest(config.src + 'static/js'))
});
// 转换前
let f = () => {
    console.log(123);
}
// 转换后
var f = function f() {
    console.log(123);
};

然而并不是所有的转换都这么简单：

// 转换前
const obj = {
    a: 1,
    b: 'str',
    c: true
};
let [a, b] = obj;
// 转换后
var obj = {
    a: 1,
    b: 'str',
    c: true
};
var _obj = _slicedToArray(obj, 2),
    a = _obj[0],
    b = _obj[1];
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

可见为了转换，引入了一个_slicedToArray函数，假如你有很多个JS文件都用了解构赋值，那么这个函数就会出现在所有的JS文件中，这显然是不合理的，于是你需要安装一个插件：

npm install --save-dev babel-plugin-transform-runtime

然后上面解构赋值的例子变为

'use strict';
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// 解构赋值
var obj = {
    a: 1,
    b: 'str',
    c: true
};
var _obj = (0, _slicedToArray3.default)(obj, 2),
    a = _obj[0],
    b = _obj[1];

简单来看，这个插件将辅助转换函数统一起来，使得在不同文件中使用的转换函数都来自一个模块，转换后的js文件在体积上也减少了（不再是一坨辅助函数，只是同一个模块的引用）

transform-runtime的作用不止于此，它还可以按需引入ES6中新的API，如Promise,Proxy等，如下：

// 转换前
let ajax = () => {
    return new Promise(res => {
        setTimeout(() => {
            res()
        }, 1000);
    })
}
// 转换后
"use strict";
var _promise = require("babel-runtime/core-js/promise");
var _promise2 = _interopRequireDefault(_promise);
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
var ajax = function ajax() {
    return new _promise2.default(function(res) {
        setTimeout(function() {
            res();
        }, 1000);
    });
};

babel自己实现的Promise实际是封装在_promise2.default上，这也说明了babel引入的垫片不会污染全局变量，比如浏览器自己实现的Promise是不会被babel污染的。但是这也导致了另一个问题：babel不会去修改全局变量，那么新增的一些实例方法，如'abc'.includes()，就没法转换了，在一些不支持该方法的环境下就会报错咯（诸如Array.from()等静态方法Babel还是可以转换的，但实例方法不行），所以还得按个包：

npm install --save-dev babel-polyfill

使用方式不是在babel配置里，而是直接在项目主js的开头直接引入：

import 'babel-polyfill'

这样引入的缺点是会污染浏览器已经支持的某些全局API，此外全部引入会导致文件体积增大，且有很多用不上的polyfill.目前webpack2的tree-shaking技术似乎可以解决，但是gulp好像没有这个功能，于是纯gulp体系下就只能自己手动引入所需模块了，如自己新建一个es6-polyfill.js：

//es6-polyfill.js
import 'core-js/es6/array'
import 'core-js/es6/function'
import 'core-js/es6/map'
import 'core-js/es6/math'
import 'core-js/es6/number'
import 'core-js/es6/object'
import 'core-js/es6/promise'
import 'core-js/es6/regexp'
import 'core-js/es6/string'
import 'core-js/fn/array/includes'

2、Babel常用的一些模块

babel-preset-es2015
将ES6代码编译成ES5语法代码
babel-preset-stage-num
JavaScript还有一些提案，正在推进，不久的将来也可能成为标准的一部分，所以目前将这些草案提出，内容更新直至最终成为标准，添加进标准库的过程划分为 5（0－4）个阶段。根据提案的状态和内容，将其在各个阶段更新（阶段0至阶段3），最终在阶段 4表明该提案被标准正式采纳，当然不被采纳的提案不会进入阶段4。

以下是4个不同阶段的打包预设：

babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
注： stage-4 预设不存在，它其实就是上文介绍的 es2015 预设。
以上每种预设都包含紧随的后期阶段预设，同时还可能包含其他额外特性。例如，babel-preset-stage-0包含 babel-preset-stage-1， babel-preset-stage-2，babel-preset-stage-3，而 babel-preset-stage-1则包含 babel-preset-stage-2，babel-preset-stage-3依次后推。
选择 babel-preset-stage-0 就能包含所有提案

babel-polyfill
Babel只能转换语法糖类的语法，并不能转换ES新增API，如Symbol, 'abc'.include()等，babel-polyfill就是干这个事，负责转换新增API，在入口处import "babel-polyfill";即可
babel-runtime
Babel转换语法以支持ES6时会在每一个处理的文件头部注入辅助代码，产生很多冗余，重复性的内容，导致代码量暴增，所以我们需要将这些辅助代码抽取至一个统一环境，babel-runtime就是干这个事，需安装babel-plugin-transform-runtime 和 babel-runtime

小结：

npm install gulp-babel --save-dev // babel核心
npm install babel-preset-env --save-dev //转换规则
npm install --save-dev babel-plugin-transform-runtime //提供ES特性的垫片和辅助转换函数，不全局污染
npm install --save-dev babel-polyfill // 提供垫片，会全局污染，但本身包体比 babel-plugin-transform-runtime 小

3、Babel 相关模块

@babel/cli
命令行工具

npm install --save-dev @babel/cli
npx babel example.js -o compiled.js

@babel/node
@babel/node模块的babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码

npm install --save-dev @babel/node
npx babel-node es6.js

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

npm install --save-dev @babel/register
require('@babel/register');
require('./es6.js');

@babel/core
如果某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块

var es6Code = 'let x = n => n + 1';
var es5Code = require('@babel/core')
  .transform(es6Code, {
    presets: ['@babel/env']
  })
  .code;

console.log(es5Code);
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

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

4、参考：

1、babel-preset-env：你需要的唯一Babel插件
2、babel-preset-env: a preset that configures Babel for you
3、Webpack自动化构建实践指南
4、不容错过的 Babel 7 知识汇总