简介
Babel 是一个 JavaScript 编译器，可将我们代码中的 ES6 语法转换为 ES5 的语法，使我们的代码能在不支撑 ES6 语法的环境中一般运转。合营一些插件，我们以至能直接运用 ES6 范例的一些新特征，而无需守候各大浏览器的完成，也无需担心兼容性。
疾速体验
1. 装置依靠
新建 babel_test 文件夹，在敕令行里进入该文件夹，并实行以下敕令：
npm init -y # 天生 package.json 文件
npm i -D babel-cli babel-preset-env
npm i -S babel-polyfill- babel-cli 是 Babel 内置的一个 CLI，可经由过程敕令行操纵来编译文件。这是一个可选的开辟依靠包，在现实开辟中可依据需求决议是不是装置。
- babel-preset-env 会依据我们设置的环境自动将该环境不支撑的语法转换 ES5 的语法。
- babel-polyfill 是一个相对完整的 ES6 环境，可认为代码的运转环境补充缺乏的 API。这是一个可选的依靠包，但个人发起最好装置并引入到代码中，详解见下文。
在编写本文章时，上面依靠包的最新版本分别为 babel-cli 6.26.0、babel-preset-env 1.6.1、babel-polyfill 6.26.0，假如装置的版本不一致，能够会获得不一样的效果。
2. 设置 Babel
新建 .bablerc 文件，内容以下：
{
"presets": ["env"]
}.bablerc 是 Babel 的默许设置文件，运转 Babel 时会自动读取该文件的设置。上面 .bablerc 文件设置的意义是对代码举行完整的转换。
3. 编写代码
新建 source.js 文件，内容以下：
// 这里的代码无任何意义，只用作示例
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};
...是 ES6 语法，概况可参考
http://es6.ruanyifeng.com/#docs/array
4. 编译
实行以下敕令就能够把 source.js 的代码转换为 ES5 的语法，并把效果输出到 target.js 。
./node_modules/babel-cli/bin/babel.js source.js -o target.jsbabel-cli 的细致敕令可参考
https://babeljs.cn/docs/usage/cli/
target.js 的内容终究以下：
'use strict';
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var sayHi = function sayHi() {
var str = 'Hello World!';
var arr = [].concat(_toConsumableArray(str));
alert(arr.join(''));
};能够看到 Babel 在 target.js 增加了 _toConsumableArray 函数，并将 [...str] 替代成了 [].concat(_toConsumableArray(str)) 。到这里我们已胜利的将代码中的 ES6 语法转换为 ES5 语法，Babel 的运用就是这么简朴。
babel-polyfill
假如我们细致检察上文中的 target.js ，会发明 Babel 增加的 _toConsumableArray 函数居然运用了 ES6 的特征 Array.from ，也就是说我们运用 Babel 转换后代码里能够还会存在 ES6 的东西！这个题目能够参考 https://www.zhihu.com/question/49382420。
这里我们须要重点注重的是：
Babel 默许只转换新的 JavaScript 句法（syntax），而不转换新的 API，比方Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的要领（比方Object.assign）都不会转码。——
《ECMAScript 6入门》
为了确保转换后的代码能一般的运转，最幸亏代码之前引入 babel-polyfill（这是一个完成了部份 ES6 特征的包）。
<!-- 在 HTML 文件中先引入 babel-polyfill 再引入 target.js -->
<!-- src 属性里的 6.26.0 是本文章编写时 babel-polyfill 的最新稳固版本，你能够须要依据现实引入对应的版本 -->
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script src="target.js"></script>至此，我们能够宁神的随便运用 ES6 的特征了。
优化
其完成代浏览器或多或少都完成了部份 ES6 范例，如 Chrome v64 以至已完成了 97% 的功用。假如我们肯定我们的代码只运转在 Chrome v64 ，那末像 source.js 中的箭头函数则无需转换，由于 Chrome v64 已支撑如许的语法了。同理我们也无需引入全部 babel-polyfill ，只需引入个中 Chrome v64 不支撑的部份即可。
Babel 的壮大的地方在这里更能获得表现。当我们设置了代码的运转环境以后，Babel 会自动推断该环境对 ES6 的完成水平，然后只把源代码中该环境不支撑的语法举行转换。假如我们在源代码中应用模块化的体式格局引入 babel-polyfill ，Babel 也会对其举行优化，只引入该环境还没有完成的模块。下面就让我们来表现一下这壮大的功用。
修正设置文件 .babelrc ，内容以下：
{
"presets": [
[
"env",
{
"targets": { // 设置代码的运转环境
"chrome": 64
},
"useBuiltIns": true // 开启对 babel-polyfill 的优化
}
]
]
}修正source.js，内容以下：
// 运用 ES6 的模块化范例引入 babel-polyfill
import 'babel-polyfill';
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};运转敕令编译胜利后，target.js 的内容以下：
'use strict';
require('core-js/modules/web.timers');
require('core-js/modules/web.immediate');
require('core-js/modules/web.dom.iterable');
const sayHi = () => {
const str = 'Hello World!';
const arr = [...str];
alert(arr.join(''));
};能够看到，箭头函数和 ...str 都没有变化，由于 Chrome v64 已支撑如许的语法。import 'babel-polyfill' 则变成了用 CommonJS 的体式格局引入了三个小模块，这是 Babel 经由过程查询 compat-table 得知 Chrome v64 还没有完成的特征后增加的模块。
以上就是 Babel 的一些基础运用了。
末了申明一下：
- 模块化并非 Babel 的事情，Babel 仅担任转换语法。Babel 输出的
target.js运用了 CommonJS 的模块化范例，这还须要一些构建东西对其进一步编译才能在 Chrome v64 上运转。 - core-js 是真正完成了 ES6 特征的包，是 babel-polyfill 的依靠，babel-polyfill 对其举行了一些包装。
