133
es6（1）——Babel
Babel
參考阮一峰的文章所寫。
已細化重點知識，確保可以按步驟複現。並省略某些不常用的內容
解釋：
1. 簡單來說，就是可以把ES6的代碼轉換成ES5的代碼，這樣你就可以在ES5的環境中運行ES6而不必擔心兼容性了；
2. ES7的轉換也可以靠這個來完成；
3. 其是放置在node_modules文件夾下的插件，就像使用其他通過npm install安裝的插件一樣使用；
4. 默認隻轉換語法，不轉換API。比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。
【使用方法】
1. 在項目的根目錄下創建一個文件，文件名是.babelrc，記得放在項目根目錄（一般是和package.json還有readme.md同一個目錄下）；
2. 注意1：上麵那個文件，在windows下不能直接創建（會提示說必須輸入文件名），
解決方法1：用linux、mac或者用IDE（比如webstorm）來創建；
解決方法2：從我的github中直接下載文件
3. 注意2：那個文件的babelrc就是後綴名，而不是txt格式的（所以會提示沒有文件名）；
4. 用編譯器打開（或者用記事本打開也行，注意編碼格式是UTF8），文件內基本格式如下：
{
"presets": [],
"plugins": []
}
5. 這個文件用於設置轉碼規則和插件；
6. presets是轉碼規則，值的數組裏麵，填寫規則。
7. plugins是插件，有需要就寫，不需要的話這個可以省略。
8. 按需安裝轉碼規則（見下麵）；
9. 將對應的字符串添加到.babelrc中（千萬別忘了，我試了半天總轉失敗，結果發現我沒加）
10. 運行轉碼命令/內嵌到package.json裏在項目運行時轉碼；
轉碼規則和轉碼安裝：
1. 首先應該安裝對應的轉碼規則集（他的規則像安裝npm插件一樣安裝）；
2. 然後在"presets"這個數組中填寫對應的值；
3. 官方提供的規則集如下（轉自[阮一峰的博客](https://es6.ruanyifeng.com/)）：
注：
$表示命令行，實際輸入的時候從npm開始輸入（應該不會有人不知道吧）；
#表示注釋，不要輸這個後麵的文字啊
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
# 添加的字符串為："es2015"（""表示這是個字符串），下同
# react轉碼規則
$ npm install --save-dev babel-preset-react
# 添加的字符串為："react"
# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
# 添加的字符串為："stage-0"至"stage-3"中的一個（顯然後麵包含前麵）
4. 安裝完轉碼規則之後（根據實際需要安裝，不用全部裝），在.babelrc文件的"presets"的值中添加對應的字符串作為數組元素，參考上麵；
方法一：全局使用babel-cli轉碼（命令行、單文件、所有文件夾輸出結果）
優點：
1.簡單直接暴力，全局安裝，哪裏都能用；
缺點：
1.項目要求有環境依賴，換了環境不能用（比如說換台電腦，但他沒裝babel-cli就尷尬了）；
前置準備：
1. 先配置好，參考【使用方法】
2. 命令行輸入以下代碼，來全局安裝babel-cli工具
npm install --global babel-cli
步驟：
1.控製台輸出轉換結果（控製台輸出）：
1. 命令行輸入以下代碼：（下同，都是控製台輸入）
babel input.js
2. 然後控製台會輸出以下內容（轉換結果，下同，結果內容都是以下的內容）：
"use strict";
var input = [];
input.map(function (item) {
return item + 1;
});
2.將轉換結果輸出到指定文件內（單文件轉換）：
1. 輸入：
babel input.js -o output.js
2. 輸出：
同目錄下自動生成output.js，文件內容是上麵的轉換結果
3. -o表示--out-file，即輸出為文件
3.將一個目錄下的所有文件（遞歸執行）全部轉碼輸出到某個文件夾下（同名轉換）：
1. 先建立一個input文件夾，把之前的input.js複製一份進去；
2. 輸入：
babel input -d output
3. -d表示--out-dir，即輸出到文件夾，前麵的input表示輸入文件夾名，後麵的output表示的是輸出的文件夾名；
4. 輸出：output目錄被創建，裏麵有input文件夾下的同名input.js，但內容是轉換後的
5. input文件下所有文件都會被轉換，轉換過程是遞歸的（即子文件夾下的子文件，甚至更深層也會被轉換）；
非全局使用babel-cli轉碼（作為項目的依賴轉碼）
優點：
1.非全局，不要求PC環境全局安裝babel-cli；
2.方便版本管理
缺點：
1.需要配置package.json，比較麻煩一些；
前置準備：
1. 先配置好，參考【使用方法】
2. 修改package.json，添加相應的腳本代碼；
3. 具體來說，根目錄下創建一個package.json，然後文件內容如下：
{
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel input -d output"
}
}
轉換方法：
1. 先建立一個input文件夾，把之前的input.js複製一份進去；
2. 然後在根目錄（即package.json以及.babelrc所在目錄的控製台輸入：
npm run build
3. 效果和全局使用的【轉換方法3】是一樣的；
注1：
npm run build裏的build，指的是package.json裏麵，scripts裏的build屬性的屬性名，如果把屬性名改為test，那麼就是npm run test
注2：
npm run build相當於執行了babel input -d output這個指令。隻不過這裏的babel來源於node_modules文件夾下的babel-cli，而不是之前通過控製台運行的全局的babel-cli
其他轉碼
如：
- 提供一個可以直接運行ES6的REPL環境，無需轉碼直接運行ES6腳本，點擊直達
- 加鉤子，每當使用require加載.js、.jsx、.es和.es6後綴名的文件，自動轉碼點擊直達
- 對某些代碼進行轉碼（按需轉碼）點擊直達
- 對API進行轉碼 點擊直達
- 在瀏覽器環境中實時轉碼（會影響性能，而以上是直接轉完後發給瀏覽器） 點擊直達
- 還有在線轉換（輸入ES6代碼，輸出ES5代碼，然後複製拿走使用） 點擊直達%3B)
- 還有關於Google公司的Traceur轉碼器，或者是babel和其他框架的配合等，請點擊右方鏈接直達阮一峰的博客來查閱
關於插件
1、例如Object.assign這樣的方法，在IE下不行。那麼就需要用插件
如這個插件：https://babeljs.io/docs/plugins/transform-runtime/
就可以讓IE支持這個功能
或者
另外提一句，Babel默認情況下，是不能轉換Set和Map等數據類型的，引自：
Babel 默認隻轉換新的 JavaScript 句法（syntax），而不轉換新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。
舉例來說，ES6在Array對象上新增了Array.from方法。Babel 就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環境提供一個墊片。
我自己實踐測試來看：
- 必須引用babel-polyfill才能正常運行Set和Map類型（不然會報錯）；
- 引入的方法就是安裝這個插件，然後import或者require他就行；
- 但單獨js引入是不行的，需要利用webpack之類的打包（因為一般情況，瀏覽器是不支持直接跑js文件的require語法）；
最後更新：2017-06-12 10:31:31