Babel使用姿势

2017-12-20 本文已影响40人风之化身呀

本篇围绕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'

小结：

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 // transform-runtime提供的垫片并不完整，所以需要babel-polyfill

疑问：
1、transform-runtime和babel-polyfill都能提供垫片，是不是二者只用一个就好了？

参考：
1、babel-preset-env：你需要的唯一Babel插件
2、babel-preset-env: a preset that configures Babel for you

Babel使用姿势

1、安装gulp-babel

猜你喜欢

热点阅读