配置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官網
• 線上試用
• 代碼