配置babel

小短腿 2019-02-12 01:47136 阅读

配置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就应该是一个简单容易上手的工具才好用。

参考资料

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!