配置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的更多相关文章

  1. 【02】webstorm配置babel转换器+截图(by魔芋)

    [02]webstorm配置babel转换器+截图(by魔芋)   [02]魔芋的安装过程     01,配置babel.   02,用webstorm.注意webstorm的版本号.   03,使用 ...

  2. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  3. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  4. babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()

    用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的  babel-plugin-import  ( 一个用于按需加载组件代码和样式的 ba ...

  5. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  6. webstorm配置babel自动转译es6的方法

    1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...

  7. Nuxt 2.3.X 配置babel

    1. 在package.json中修改运行脚本 添加--exec babel-node 添加之后的效果为:(修改了8/10行) { "name": "nuxt-learn ...

  8. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  9. webpack配置babel篇

    babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...

随机推荐

  1. 区域检测算法-MSERs

    区域检测算法-MSERs:最大稳定极值区域 参考书籍——<图像局部不变性特征与描述>王永明.王贵锦著 MSER最大极值稳定区域的提取步骤:1.像素点排序   2.极值区域生成   3.稳定 ...

  2. python文件操作打开模式 r,w,a,r+,w+,a+ 区别辨析

    主要分成三大类: r 和 r+     "读"功能 r  只读 r+ 读写(先读后写) 辨析:对于r,只有读取功能,利用光标的移动,可以选择要读取的内容. 对于r+,同时具有读和写 ...

  3. iBtais 多重嵌套循环

    iBatis支持集合循环, 但是如何做到双重循环, 请见下例子 例子描述: 需要去三张结构相同的表中获取信息, 需要将信息拼合去重后返回 入参数据类型: Map<String,Object> ...

  4. ffmpeg源码编译安装(Compile ffmpeg with source) Part 1 : 通用部分

    本页内容包含了在Unix/Linux中用源码包编译的通用的结构 可能不仅仅适用于ffmpeg 为啥使用源码包编译 编译源码可以扩展功能, 实现相对于自己平台的最优化, 还可以自定义的修改 概述 大部分 ...

  5. Codeforces Educational Codeforces Round 44 (Rated for Div. 2) F. Isomorphic Strings

    Codeforces Educational Codeforces Round 44 (Rated for Div. 2) F. Isomorphic Strings 题目连接: http://cod ...

  6. Javaweb 编解码流程

    参考: https://www.ibm.com/developerworks/cn/java/j-lo-chinesecoding/#N10263 https://www.cnblogs.com/ch ...

  7. Centos6.5---samba文件共享服务配置(一)

    Linux---------samba文件共享服务配置(一) samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. https://www.cnblogs.com/zo ...

  8. Android-Could not download kotlin-reflect.jar

    在AndroidStudio中报以下错误: 错误详情: Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-refle ...

  9. EmguCV使用Stitcher类来拼接图像

    using System; using System.Windows; using System.Collections.Generic; using System.ComponentModel; u ...

  10. 脑残式网络编程入门(三):HTTP协议必知必会的一些知识

    本文原作者:“竹千代”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.前言 无论是即时通讯应用还是传统的信息系统,Http协议都是我们最常打交 ...