配置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的更多相关文章
- 【02】webstorm配置babel转换器+截图(by魔芋)
[02]webstorm配置babel转换器+截图(by魔芋) [02]魔芋的安装过程 01,配置babel. 02,用webstorm.注意webstorm的版本号. 03,使用 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- [转] webpack中配置Babel
一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...
- babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()
用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的 babel-plugin-import ( 一个用于按需加载组件代码和样式的 ba ...
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- webstorm配置babel自动转译es6的方法
1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...
- Nuxt 2.3.X 配置babel
1. 在package.json中修改运行脚本 添加--exec babel-node 添加之后的效果为:(修改了8/10行) { "name": "nuxt-learn ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- webpack配置babel篇
babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...
随机推荐
- 区域检测算法-MSERs
区域检测算法-MSERs:最大稳定极值区域 参考书籍——<图像局部不变性特征与描述>王永明.王贵锦著 MSER最大极值稳定区域的提取步骤:1.像素点排序 2.极值区域生成 3.稳定 ...
- python文件操作打开模式 r,w,a,r+,w+,a+ 区别辨析
主要分成三大类: r 和 r+ "读"功能 r 只读 r+ 读写(先读后写) 辨析:对于r,只有读取功能,利用光标的移动,可以选择要读取的内容. 对于r+,同时具有读和写 ...
- iBtais 多重嵌套循环
iBatis支持集合循环, 但是如何做到双重循环, 请见下例子 例子描述: 需要去三张结构相同的表中获取信息, 需要将信息拼合去重后返回 入参数据类型: Map<String,Object> ...
- ffmpeg源码编译安装(Compile ffmpeg with source) Part 1 : 通用部分
本页内容包含了在Unix/Linux中用源码包编译的通用的结构 可能不仅仅适用于ffmpeg 为啥使用源码包编译 编译源码可以扩展功能, 实现相对于自己平台的最优化, 还可以自定义的修改 概述 大部分 ...
- 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 ...
- Javaweb 编解码流程
参考: https://www.ibm.com/developerworks/cn/java/j-lo-chinesecoding/#N10263 https://www.cnblogs.com/ch ...
- Centos6.5---samba文件共享服务配置(一)
Linux---------samba文件共享服务配置(一) samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. https://www.cnblogs.com/zo ...
- Android-Could not download kotlin-reflect.jar
在AndroidStudio中报以下错误: 错误详情: Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-refle ...
- EmguCV使用Stitcher类来拼接图像
using System; using System.Windows; using System.Collections.Generic; using System.ComponentModel; u ...
- 脑残式网络编程入门(三):HTTP协议必知必会的一些知识
本文原作者:“竹千代”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.前言 无论是即时通讯应用还是传统的信息系统,Http协议都是我们最常打交 ...