配置babel

配置babel

ECMAScript的版本，每年都会定期举行会议，发布各种标准，当前版本到了2019，但大部分人使用的浏览器，都可以支持es2015，也就是es6，要等到大部分浏览器都支持到最新版本，这样需要一段很长的时间，那么要用到最新的语法特性，就需要使用转换工具，将最新的语法特性，尽可能转换为主流的语法版本代码，如果不能转，那就只能不支持了，而babel就是这样的转换工具。

配置babel，需要用到几部分：

• 依赖的库
• .babelrc文件

安装依赖库：

    npm install --save-dev babel-core babel-preset-es2015 babel-preset-stage-2
    npm install --save-dev babel-register babel-polyfill
    npm install --save-dev babel-plugin-transform-runtime

• babel-core: 对语法进行转换
• babel-preset-2015 babel-preset-stage2: 转换的目标代码为es6 stage2
• babel-register: 改写require，在加载时对代码进行转换
• babel-polyfill: 对内部API进行转码，因为有些API是不支持的
• babel-plugin-transform-runtime：对API统一指向这个插件仲，避免过多重复代码生成

.babelrc文件：

{
    "presets": ["es2015", "stage-2"],
    "plugins": ["transform-runtime"],
    "comments": false
}

安装工具进行转码

试用命令行进行转码，看看转吗后的效果：

npm install --global babel-cli

测试的代码，箭头函数，异步函数等等，babel.test.js：

import axios from 'axios'

const foo = param =>{
    return axios.get('www.example.com', {params : {}})
}

async function test(){

}

async ()=>{
    await test()
}

执行命令：

babel babel.test.js -o compile.js

显示的内容：

    'use strict';

    var _regenerator = require('babel-runtime/regenerator');

    var _regenerator2 = _interopRequireDefault(_regenerator);

    var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

    var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

    var test = function () {
        var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee() {
            return _regenerator2.default.wrap(function _callee$(_context) {
                while (1) {
                    switch (_context.prev = _context.next) {
                        case 0:
                        case 'end':
                            return _context.stop();
                    }
                }
            }, _callee, this);
        }));

        return function test() {
            return _ref.apply(this, arguments);
        };
    }();

    var _axios = require('axios');

    var _axios2 = _interopRequireDefault(_axios);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    var foo = function foo(param) {
        return _axios2.default.get('www.example.com', { params: {} });
    };

    (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2() {
        return _regenerator2.default.wrap(function _callee2$(_context2) {
            while (1) {
                switch (_context2.prev = _context2.next) {
                    case 0:
                        _context2.next = 2;
                        return test();

                    case 2:
                    case 'end':
                        return _context2.stop();
                }
            }
        }, _callee2, undefined);
    }));

总结

好了，基本配置一次，也很好上手，对babel大概的流程有点了解，babel的原理也是挺简单直接，但里面需要处理的事情，真的够多，让js好写了很多，其实babel就应该是一个简单容易上手的工具才好用。

参考资料

• babel官网
• 在线试用
• 代码