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