ECMAScript
ECMAScript是一个由 TC39委员会发布的标准，JavaScript是对 ECMAScript标准的一个实现子集，可以理解为JavaScript = ECMAScript + 宿主 API（浏览器的Dom + Bom API 或者 node的API）。ECMAScript标准从第三个版本也就是ES3到ES6（也称为ECMAScript 2015）时隔六年，ES6给 JavaScript带来革命性的进步，加入了类、静态模块体系、块级作用域等特性，虽然浏览器自身的功能增强、 V8 等 JavaScript 引擎性能提升，但是不同厂商的浏览器对于ES6的支持程度参差不齐，且浏览器对规范的实现速度仍远远赶不上规范更新的速度，很多新新特性不能在全部浏览器中运行，在这个环境因素下，JavaScript语法编译器被大广泛应用。
Babel
作用
Babel是一款JavaScript语法编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中（输入以下一代 JavaScript 语法书写的代码 => 输出浏览器兼容的 JavaScript 代码），先来看看使用babel将es6代码编译为es5的效果：
// es6的箭头函数[1, 2, 3].map((n) => n + 1);
输出代码：
//编译后的es5代码"use strict";[1,2,3].map(function(n){returnn +1;});
Babel除了对新语法的转换，还可以通过 Polyfill 方式在目标环境中添加缺失的特性。
插件和preset
Babel本身将代码解析之后再输出同样的代码，什么都没有做基本上类似于：
constbabel =code=>code;
我们实际上是使用的Babel插件或者preset（一组插件）转换我们的代码，插件分为转换插件和语法插件（转换插件会自动启用语法插件）。
常用插件列表
react-jsx
arrow-functions
block-scoped-functions
block-scoping
classes
computed-properties
destructuring
duplicate-keys
for-of
function-name
instanceof
literals
常用preset列表
@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript
在使用Babel插件进行编译时，插件的使用顺序很重要，意思是：如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或preset的排列顺序依次执行。
插件在 Presets 前运行。
插件顺序从前往后排列。
Preset 顺序是颠倒的（从后往前）。
插件和preset都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置，参数对象为一个以参数名作为键（key）的对象。
{"plugins": [ ["transform-async-to-module-method", {"module":"bluebird","method":"coroutine"} ] ]}
自定义插件
1、利用 astexplorer.net 创建一个插件
//一个插件就是一个函数exportdefaultfunction({types: t}) {return{ visitor: { Identifier(path) { letname=path.node.name; //reversethename: JavaScript -> tpircSavaJpath.node.name =name.split('').reverse().join(''); } } };}
2、使用 generator-babel-plugin 生成一个插件模板
3、参考 babel-handbook 学习如何创建自己的插件https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md
自定义preset
如需创建一个自己的 preset，就是导出一个对象，对象中包括：插件数组或者其他presets
//只有插件数组module.exports = function() { return { plugins: [ "pluginA", "pluginB", "pluginC", ] };}//或者包括其他presets和参数module.exports = () => ({ presets: [ require("@babel/preset-env"), ], plugins: [ [require("@babel/plugin-proposal-class-properties"), { loose: true }], require("@babel/plugin-proposal-object-rest-spread"), ],});
Babel官方配置方式
使用Babel进行语法编译时可以根据项目自身要针对的浏览器情况，来配置Babel参数决定编译输出的具体语法。
在项目根目录创建babel.config.json
{"presets": [...],"plugins": [...]}
在项目中创建通过创建.babelrc.json
{"presets": [...],"plugins": [...]}
或者直接在package.json中的babel属性
{"babel": {"presets": [ ... ],"plugins": [ ... ], } }
使用 CLI (@babel/cli)
npminstall --save-dev @babel/core @babel/cli
npx babel script.js--out-file script-compiled.js--source-maps
使用 API (@babel/core)
require("@babel/core").transform("code", {plugins:["@babel/plugin-transform-arrow-functions"]});
原理
编译过程分为三个阶段：解析、转换和打印输出
可以参考：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md
结合 webpack 和 Babel 进行 JavaScript 编译
在使用webpack进行构建时，可以使用Babel提供的babel-loader插件在webpack构建过程中的源码转换阶段对JavaScript进行编译，使用方式同常规的webpack loader 也就是babel-loader，来看一下webpack.config.js 的配置：
// webpack.config.js{ module: { rules: [ { test:/\.js$/,exclude:/(node_modules|bower_components)/, use: { loader:'babel-loader',options: {"presets": ["es2015","stage-2"] } } } ] }}
Babel-loader
参见：https://ishare.58corp.com/articleDetail?id=26208