本文来自阮一峰-Flex 布局教程：实例篇，仅供自己学习参考整理。
一、概念
1.ECMAScript和JavaScript的关系？
前者是后者的规格，后者是前者的一种实现（另外ECMAScript方言还有JScript和ActionScript），日常场合，这两个词是可以互换的。
2.ES6和ES2015
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。
3.语法提案的批准流程
任何人都可以向标准委员会（TC39委员会）提案，要求修改语言标准。
一种新的语言标准从提案到变成正式标准，需要经历5个阶段。每个阶段都需要由TC39委员会批准。
- Stage 0 —— 展示阶段
- Stage 1 —— 征求意见阶段
- Stage 2 —— 草案阶段
- Stage 3 —— 候选人阶段
- Stage 4 —— 定案阶段
一个提案只要能进入Stage2阶段，就差不多肯定会包括在以后的正式标准里面。ECMAScript当前所有的提案，可以在TC39的官方网站查看。
目前，各大浏览器对 ES6 的支持可以查看kangax.github.io/compat-table/es6/。
Node.js 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看 Node.js 默认没有打开的 ES6 实验性语法。
// Linux & Mac
$ node --v8-options | grep harmony
// Windows
$ node --v8-options | findstr harmony
4.Babel 转码器
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。下面例子：
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function(item){
return item + 1;
})
上面的原始代码用了箭头函数，Babel将其转为普通函数，就能在不支持箭头函数的JavaScript环境执行了。
下面的命令在项目目录中，安装Babel。
$ npm install --save-dev @babel/core
4-1 配置文件.babelrc
Babel的配置文件时.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
这个文件用来设置转码规则和插件，基本格式如下：
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，官方提供以下的规则集，可以根据需要安装。
# 最新转码规则
$ npm install --save-dev @babel/preset-env
# react 转码规则
$ npm install --save-dev @babel/preset-react
然后将这些规则加入.babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
注意，以下所有Babel工具和模块的使用，都必须先安装好.babelrc。
4-2 命令行转码
Babel提供命令行工具@babel/cli，用于命令行转码。
它的安装命令如下：
$ npm install --save-dev @babel/cli
基本用法如下：
# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s
4-3 babel-node
@babel/node模块的babel-node命令，提供一个支持的ES6的REPL环境。他支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。
首先，安装这个模块：
$ npm install --save-dev @babel/node
然后，执行babel-node就进入REPL环境。
$ npx babel-node
> (x => x * 2)(1)
2
babel-node命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js，然后直接运行。
# es6.js 的代码
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2
4-4 @babel/register 模块
@babel/register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。
$ npm install --save-dev @babel/register
使用时，必须首先加载@babel/register。
// index.js
require('@babel/register');
require('./es6.js');
然后，就不需要手动对index.js转码了。
$ node index.js
2
需要注意的是，@babel/register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
4-5 polyfill
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片。
安装命令如下。
$ npm install --save-dev core-js regenerator-runtime
然后，在脚本头部，加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
Babel 默认不转码的 API 非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。
4-6 浏览器环境
Babel也可以用于浏览器环境，使用@babel/standalone提供的浏览器版本，将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel 提供一个REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。
网友评论