当前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统一指向这个插件仲，避免过多重复代码生成
{ "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就应该是一个简单容易上手的工具才好用。