本文來自阮一峰-Flex 布局教程：實例篇校哎，僅供自己學(xué)習(xí)參考整理。
一腰奋、概念
1.ECMAScript和JavaScript的關(guān)系抱怔？
前者是后者的規(guī)格劣坊，后者是前者的一種實現(xiàn)（另外ECMAScript方言還有JScript和ActionScript）屈留，日常場合，這兩個詞是可以互換的康二。
2.ES6和ES2015
ES6 既是一個歷史名詞勇蝙，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準浅蚪，涵蓋了 ES2015、ES2016惜傲、ES2017 等等，而 ES2015 則是正式名稱时甚，特指該年發(fā)布的正式版本的語言標準哈踱。本書中提到 ES6 的地方荒适，一般是指 ES2015 標準开镣，但有時也是泛指“下一代 JavaScript 語言”。
3.語法提案的批準流程
任何人都可以向標準委員會（TC39委員會）提案陕壹，要求修改語言標準树埠。
一種新的語言標準從提案到變成正式標準，需要經(jīng)歷5個階段怎憋。每個階段都需要由TC39委員會批準九昧。
- Stage 0 —— 展示階段
- Stage 1 —— 征求意見階段
- Stage 2 —— 草案階段
- Stage 3 —— 候選人階段
- Stage 4 —— 定案階段
一個提案只要能進入Stage2階段毕匀，就差不多肯定會包括在以后的正式標準里面。ECMAScript當(dāng)前所有的提案期揪，可以在TC39的官方網(wǎng)站查看。
目前姓建，各大瀏覽器對 ES6 的支持可以查看kangax.github.io/compat-table/es6/缤苫。
Node.js 是 JavaScript 的服務(wù)器運行環(huán)境（runtime）速兔。它對 ES6 的支持度更高活玲。除了那些默認打開的功能，還有一些語法功能已經(jīng)實現(xiàn)了镀钓，但是默認沒有打開镀迂。使用下面的命令，可以查看 Node.js 默認沒有打開的 ES6 實驗性語法探遵。
// Linux & Mac
$ node --v8-options | grep harmony
// Windows
$ node --v8-options | findstr harmony
4.Babel 轉(zhuǎn)碼器
Babel是一個廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼涯穷，從而在老版本的瀏覽器執(zhí)行。這意味著拷况，你可以用ES6的方式編寫程序诉稍，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。下面例子：
// 轉(zhuǎn)碼前
input.map(item => item + 1);
// 轉(zhuǎn)碼后
input.map(function(item){
return item + 1;
})
上面的原始代碼用了箭頭函數(shù)杯巨，Babel將其轉(zhuǎn)為普通函數(shù)努酸，就能在不支持箭頭函數(shù)的JavaScript環(huán)境執(zhí)行了。
下面的命令在項目目錄中，安裝Babel心褐。
$ npm install --save-dev @babel/core
4-1 配置文件.babelrc
Babel的配置文件時.babelrc笼踩，存放在項目的根目錄下。使用Babel的第一步嚎于，就是配置這個文件。
這個文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件袍睡，基本格式如下：
{
"presets": [],
"plugins": []
}
presets字段設(shè)定轉(zhuǎn)碼規(guī)則肋僧，官方提供以下的規(guī)則集斑胜，可以根據(jù)需要安裝嫌吠。
# 最新轉(zhuǎn)碼規(guī)則
$ npm install --save-dev @babel/preset-env
# react 轉(zhuǎn)碼規(guī)則
$ npm install --save-dev @babel/preset-react
然后將這些規(guī)則加入.babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
注意，以下所有Babel工具和模塊的使用凭戴，都必須先安裝好.babelrc泥栖。
4-2 命令行轉(zhuǎn)碼
Babel提供命令行工具@babel/cli，用于命令行轉(zhuǎn)碼吧享。
它的安裝命令如下：
$ npm install --save-dev @babel/cli
基本用法如下：
# 轉(zhuǎn)碼結(jié)果輸出到標準輸出
$ npx babel example.js
# 轉(zhuǎn)碼結(jié)果寫入一個文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整個目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 參數(shù)生成source map文件
$ npx babel src -d lib -s
4-3 babel-node
@babel/node模塊的babel-node命令，提供一個支持的ES6的REPL環(huán)境钞它。他支持Node的REPL環(huán)境的所有功能操灿，而且可以直接運行ES6代碼。
首先趾盐，安裝這個模塊：
$ npm install --save-dev @babel/node
然后小腊，執(zhí)行babel-node就進入REPL環(huán)境久窟。
$ 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命令，為它加上一個鉤子峻村。此后，每當(dāng)使用require加載.js粘昨、.jsx、.es和.es6后綴名的文件芭析，就會先用 Babel 進行轉(zhuǎn)碼吞瞪。
$ npm install --save-dev @babel/register
使用時，必須首先加載@babel/register芍秆。
// index.js
require('@babel/register');
require('./es6.js');
然后，就不需要手動對index.js轉(zhuǎn)碼了霉颠。
$ node index.js
2
需要注意的是，@babel/register只會對require命令加載的文件轉(zhuǎn)碼蒿偎，而不會對當(dāng)前文件轉(zhuǎn)碼怀读。另外，由于它是實時轉(zhuǎn)碼菜枷，所以只適合在開發(fā)環(huán)境使用。
4-5 polyfill
Babel 默認只轉(zhuǎn)換新的 JavaScript 句法（syntax）椿息，而不轉(zhuǎn)換新的 API歹袁，比如Iterator寝优、Generator枫耳、Set、Map钻心、Proxy、Reflect捷沸、Symbol狐史、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)碼骏全。
舉例來說，ES6 在Array對象上新增了Array.from方法试吁。Babel 就不會轉(zhuǎn)碼這個方法楼咳。如果想讓這個方法運行熄捍，可以使用core-js和regenerator-runtime(后者提供generator函數(shù)的轉(zhuǎn)碼)母怜，為當(dāng)前環(huán)境提供一個墊片。
安裝命令如下宾添。
$ npm install --save-dev core-js regenerator-runtime
然后柜裸，在腳本頭部，加入如下兩行代碼疙挺。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
Babel 默認不轉(zhuǎn)碼的 API 非常多，詳細清單可以查看babel-plugin-transform-runtime模塊的definitions.js文件蔬崩。
4-6 瀏覽器環(huán)境
Babel也可以用于瀏覽器環(huán)境，使用@babel/standalone提供的瀏覽器版本沥阳，將其插入網(wǎng)頁。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意脉让，網(wǎng)頁實時將 ES6 代碼轉(zhuǎn)為 ES5，對性能會有影響溅潜。生產(chǎn)環(huán)境需要加載已經(jīng)轉(zhuǎn)碼完成的腳本薪伏。
Babel 提供一個REPL 在線編譯器，可以在線將 ES6 代碼轉(zhuǎn)為 ES5 代碼嫁怀。轉(zhuǎn)換后的代碼，可以直接作為 ES5 代碼插入網(wǎng)頁運行挡育。
