当前位置: 萬仟网 > IT编程>开发语言>JavaScript > 配置babel

配置babel

2019年02月11日 07:21  | 萬仟网IT编程  | 我要评论

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

参考资料

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • 数组和字符串的方法整合

    js中的数组和字符串有点类似,不是说本质上,而是在遍历,获取时的类似。从标识来说,可以一眼看出那个是数组,那个是字符串;但在使用遍历时,会不经意的将... [阅读全文]
  • React Native实践总结一

    一、React的世界观1、通过改变state来改变视图视图不用考虑如何改变自己,把state画出来即可。2、变量不可变通过创建一个新的state来更... [阅读全文]
  • 复习0824js

    复习0824js

    编程思想: 面向过程:凡事亲力亲为,所有事情的过程都要清楚,注重的是过程。 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果... [阅读全文]
  • react 地图发布 cesium 篇

    上篇文章介绍了如何搭建 react cesium 开发环境。在开发环境下,项目一切运行正常。最近把项目打包发布出来,却遇见了 cesium 不能正确... [阅读全文]
  • Ext.form.Label组件动态设置html值

    解决方法: (1)用的是 Ext.getCmp(id).setText('XXXX')可以动态设置label 显示的文本值,但是文本... [阅读全文]
  • BOM之window核心模块

    BOM之window核心模块

    Window对象包含以下五大核心:document,screen,navigator,history,location。 一 document 文档... [阅读全文]
  • JavaScript算法实现——排序

    JavaScript算法实现——排序

    在计算机编程中,排序算法是最常用的算法之一,本文介绍了几种常见的排序算法以及它们之间的差异和复杂度。 冒泡排序 冒泡排序应该是最简单的排序算法了,在... [阅读全文]
  • ES6 入门系列 ArrayBuffer

    由来 "推荐在这里阅读" js操作二进制数据三兄弟 ArrayBuffer对象, TypeArray视图和DataView视图 它们都以数组的语法处... [阅读全文]
  • new 运算符的原理

    关于 new 运算符的原理: 1、红宝书上解释: (1)创建一个新对象 (2)将构造函数的作用域赋给新对象 (3)执行构造函数中的代码 (4)返回新... [阅读全文]
  • vue的基本语法

    在学习vue之前,我们应了解一下什么是vue.js? 什么是Vue.js? Vue.js是目前最后一个前端框架,React是最流行的一个前端框架(r... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com