本文在 nodelover.me 同步發(fā)布
地址是：http://nodelover.me/#/blog/article/info/589ac0ee128fe10058fc83ff
看完本文，你可以對(duì) babel 的一些插件有一個(gè)簡(jiǎn)單的認(rèn)識(shí)，知道這些插件是干嘛用的，等需要用的時(shí)候，你還需要自己對(duì)照官網(wǎng)的文檔進(jìn)行配置。
why babel？
看近期的一些視頻和文章，大家都知道，我最近是在學(xué)習(xí)和使用 TypeScript。所以大家可以不理解我為什么還要去學(xué)習(xí) Babel 這個(gè)轉(zhuǎn)換器。
原因如下
- TS 是 ES 的超集，TS 完全是可以編譯成 ES 的樣子，然后再通過(guò) Babel 把 ES 編譯成瀏覽器可以運(yùn)行的 JS 代碼。
- TS 除了一些自己的特性外，還包括了 ES 所有的特性。
- 只要 JS 可以運(yùn)行，那么 TS 就一定可以解決，之所以報(bào)錯(cuò)，是因?yàn)檎也坏蕉x文件的問(wèn)題，因?yàn)?ES 沒(méi)有靜態(tài)檢測(cè)，所有我們可以先寫 ES 來(lái)驗(yàn)證自己的一些想法。
前段時(shí)間我看見(jiàn)有人評(píng)價(jià)我說(shuō)，拾人牙慧，都是照著文檔讀一偏。
當(dāng)然你能把官網(wǎng)的一些資料閱讀的很好，那么你一定很牛逼，呵呵。確實(shí)沒(méi)必要聽(tīng)我廢話，因?yàn)槟愣紩?huì)了，但是你也可以試一試來(lái)寫教程。
我了解可能大家想要我說(shuō)出一些我自己的理解，其實(shí)在視頻里面也有，但是我的理解始終是我的理解，不是你的理解，哪怕我告訴你，你也不一定理解。我能告訴你的是不理解去哪找答案，本著授人以魚(yú)不如授人以漁的道理教大家寫代碼。
你問(wèn)我要 ??，我只能說(shuō)抱歉，我沒(méi)有。還有一些就是純粹的鍵盤俠，不鳥(niǎo)就是了。
我認(rèn)為脫離文檔的講解都是扯淡，視頻，文章寫了，就會(huì)過(guò)時(shí)，特別是 IT 類的技術(shù)文章，今天寫的是 1.x 版本。10天后，對(duì)不起，官方發(fā)布 4.x 版本，預(yù)計(jì)年底發(fā)布 8.x 版本。這可能有點(diǎn)調(diào)侃 google 版本帝了。雖然沒(méi)有那么夸張，但是事實(shí)確實(shí)如此。
盡管版本更新，但是它的文檔也是隨著更新的。只要文檔不離手，走遍天下我都有。
使用
首先我們進(jìn)入官網(wǎng)，官方直接給出了如何使用的例子。
安裝依賴
npm install --save-dev babel-cli babel-preset-env
創(chuàng)建 .babelrc 文件
{
"presets": ["env"]
}
右邊的這一塊就是我們 ES2015 的語(yǔ)法新特性，不了解，直接點(diǎn)進(jìn)去就可以查看。
babel-cli 就是我們的 babel 命令行工具，它會(huì)安裝一個(gè)babel-node的命令行工具，它可以直接運(yùn)行 babel 代碼。
preset 就是預(yù)設(shè)的意思，babel-preset-env 就是環(huán)境預(yù)設(shè)。
babel-preset-env 的作用是什么？
英語(yǔ)看不懂，自己用翻譯看，誰(shuí)都想不勞而獲，但這是不可能的。
這一個(gè)是環(huán)境支持表。
大概意思就是，通過(guò) env 這個(gè)預(yù)設(shè)，或者說(shuō)轉(zhuǎn)換器，他可以根據(jù)你配置的選項(xiàng)，自動(dòng)添加一些其他的轉(zhuǎn)換器，來(lái)滿足你當(dāng)前的裝換需求。
那么它一定有一些配置選項(xiàng)。
地址在這。
http://babeljs.io/docs/plugins/preset-env/
在頁(yè)面里面我們可以看到這些配置項(xiàng)。而且下面也有 example，也就是例子。
我簡(jiǎn)單說(shuō)一下這些配置項(xiàng)的作用。
- targets.node 支持到哪個(gè)版本的 node
- targets.browsers 支持到哪個(gè)版本的瀏覽器
- loose 啟動(dòng)寬松模式，配合 webpack 的 loader 使用
- modules 使用何種模塊加載機(jī)制
- debug 開(kāi)啟調(diào)試模式
- include 包含哪些文件
- exclude 排除哪些文件
- useBuiltIns 是否對(duì) babel-polyfill 進(jìn)行分解，只引入所需的部分
npm install --save-dev babel-cli babel-preset-env
這一條命令究竟安裝了些什么東西呢？
首先查看 .bin 目錄
很明顯，我們用的上的就是 babel、babel-node 命令。
還安裝了 babel-polyfill、babel-register，babel-core 至于作用我們等會(huì)再說(shuō)。
我們新建一個(gè) src/app.js 文件。
寫下以下代碼
let func = () => {
console.log("hello babeljs");
}
func()
在 package.json 里面添加一些腳本
"scripts": {
"start": "babel-node src/app.js",
"compile": "babel src -d dist"
},
關(guān)于如何使用 babel 命令行通過(guò)以下命令查看
./node_modules/.bin/babel --help
運(yùn)行一下這倆個(gè)命令。
polyfill
babel 只是會(huì)裝換語(yǔ)法，而版本對(duì)一些對(duì)象添加的新 API ，babel-cli 則無(wú)能為力。所以我們只能通過(guò) babel-polyfill 這個(gè)插件，它的原理就是通過(guò)老的方法，實(shí)現(xiàn)新 API 提供的功能，然后再掛載到響應(yīng)的對(duì)象上面去。
修改 .babelrc，添加一些配置項(xiàng)
{
"presets": [
["env", {
"useBuiltIns": true
}]
]
}
修改 src/app.js
import "babel-polyfill"
let func = () => {
console.log("hello babeljs");
}
func()
運(yùn)行轉(zhuǎn)換命令
默認(rèn) import "babel-polyfill" 會(huì)轉(zhuǎn)換為 require("babel-polyfill")，但是經(jīng)過(guò)我們的配置后。
變成了以上的樣子。
babel-register
他會(huì)修改你的 require 函數(shù)，讓它具有引入 es2015 代碼模塊的能力。
新建一個(gè) moduleA.js 文件
export default {
name: "yugo"
}
修改 app.js 文件
// require("babel-register")
const A = require("./moduleA.js")
console.log(A)
運(yùn)行，它會(huì)報(bào)錯(cuò)。
解開(kāi)我們的注釋，這樣就可以拿到我們的對(duì)象了。
babel-core
它是把一個(gè)es 代碼字符串，編譯成 js 代碼字符串的工具。
React
假如你用了 React，你可能需要安裝這個(gè)插件
其他插件
latest 預(yù)設(shè) 是 es2017，es2016, es2015 的綜合體。
還有一些位于草案，提議階段的功能的插件轉(zhuǎn)移工具。
- Stage 0 - Strawman（展示階段）
- Stage 1 - Proposal（征求意見(jiàn)階段）
- Stage 2 - Draft（草案階段）
- Stage 3 - Candidate（候選人階段）
- Stage 4 - Finished（定案階段）
進(jìn)入 2 階段，基本上都已經(jīng)確定要發(fā)布了。
在 2015 年進(jìn)入 stage4 的叫做 es2015
在 2016 年進(jìn)入 stage4 的叫做 es2016
以此類推
stage-0
stage0 包括，stage1，2，3的特性，還有自己的一些特性，這里的特性是函數(shù)綁定與 do 表達(dá)式。不懂沒(méi)關(guān)系，自己點(diǎn)進(jìn)去看例子就明白了。
依次類推，1 包括 2、3的特性。
let a = do {
if(x > 10) {
'big';
} else {
'small';
}
};
// is equivalent to:
let a = x > 10 ? 'big' : 'small';
obj::func
// is equivalent to:
func.bind(obj)
obj::func(val)
// is equivalent to:
func.call(obj, val)
::obj.func(val)
// is equivalent to:
func.call(obj, val)
安裝和使用
官方給出了很多使用的例子在這個(gè)頁(yè)面，照著配置就行了。
http://babeljs.io/docs/setup/#installation
這些特性感覺(jué)用起來(lái)非常的暢快，但是 ts 好像不支持使用這些特性。這就非常尷尬了。
