Babel

Babel 是一個(gè) JavaScript 編譯器。
Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。

Babel 由 Node.js 驅(qū)動(dòng)，可以把 ES6+ 的代碼編譯成 ES5、ES3 的代碼。

配合插件和工具，Babel 還能處理一些非規(guī)范的語(yǔ)法，處理 JSX、TypeScript 等。

使用 Babel，可以讓開發(fā)者在開發(fā)環(huán)境享受新特性帶來(lái)的優(yōu)質(zhì)的編碼體驗(yàn)，又能讓代碼在生產(chǎn)環(huán)境兼容大部分瀏覽器或其他宿主環(huán)境，如 Node.js。

1. 安裝 Babel

Babel 可以直接使用 npm 安裝。

首先進(jìn)入到一個(gè)空目錄，初始化一個(gè)項(xiàng)目，然后安裝 Babel。

npm init -y

npm i @babel/core @babel/cli -D

安裝后可以查看 package.json 中的內(nèi)容，因?yàn)榘惭b時(shí)候提供了 -D 參數(shù)，表示安裝到開發(fā)依賴中，-D 是 --save-dev 參數(shù)的別名。

安裝完后就可以利用 npm scripts 使用 babel 命令行工具了。

2. 使用 Babel

先創(chuàng)建一個(gè)帶有 ES6 語(yǔ)法的 JS 文件：

// index.js
const fn = (a, b) => a + b;

const added = fn(1, 2);

然后修改一下 package.json 的 scripts 選項(xiàng)。

// package.json
"scripts": {
  "compile": "babel index.js"
}

保存后就可以進(jìn)入終端，輸入命令 npm run compile，npm 就會(huì)去執(zhí)行 compile 對(duì)應(yīng)的命令，也就是使用 Babel，對(duì) index.js 文件進(jìn)行編譯。

但執(zhí)行后會(huì)發(fā)現(xiàn)代碼并沒(méi)有變成非 ES6 的代碼，那是因?yàn)闆](méi)有告訴 Babel 想要將現(xiàn)有代碼編譯成什么樣的代碼，這時(shí)候就需要提供一個(gè)配置文件。

2.1 babel 配置文件

在項(xiàng)目根目錄新建一個(gè) babel.config.js 的文件，以前的 Babel 版本對(duì)應(yīng)的默認(rèn)配置文件名是 .babelrc，Babel@7 之后官方更推薦使用 babel.config.js。

然后安裝一下 Babel 的預(yù)設(shè)配插件，Babel 提供了許多預(yù)設(shè)，官方命名為 Presets，現(xiàn)有的 Preset 非常多，如 preset-es2015、preset-es2016、preset-es2017，每一個(gè)對(duì)應(yīng)了一個(gè) ES 的版本，現(xiàn)在 ES 每年都會(huì)有一個(gè)版本，所以插件會(huì)越來(lái)越多。

preset-env 這個(gè)預(yù)設(shè)為解決上述和一些其他問(wèn)題而被官方推出，如果不給任何配置，這個(gè) preset 的效果與 preset-latest 相同。

所以要安裝一下 @babel/preset-env 這個(gè)預(yù)設(shè)。

npm i @babel/preset-env -D

然后修改配置文件：

// babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
  ],
};

告訴 Babel，presets 使用 @babel/preset-env，presets 配置項(xiàng)是個(gè)數(shù)組，可以有多個(gè) presets，目前只用到一個(gè)。

做好這些工作，再去命令行跑 npm run compile：

現(xiàn)在這樣就成功的把 ES6 代碼編譯成了 ES5。

但現(xiàn)在代碼并沒(méi)有輸出成文件，而是直接顯示在了終端里，最好是能輸出到一個(gè)文件里，這個(gè)需求改下命令就能做到。

// package.json
"scripts": {
  "compile": "babel index.js -o index.compiled.js"
}

增加 -o 參數(shù)，表示要輸出到哪個(gè)文件，然后再執(zhí)行 npm run compile：

為什么 npm run compile 可以去調(diào)用 babel 命令行工具？
在 node_modules 下有個(gè) .bin 目錄，在執(zhí)行一個(gè)命令的時(shí)候，npm 會(huì)先去 node_nodules/.bin 下找對(duì)應(yīng)的命令行工具，如果有就會(huì)調(diào)用執(zhí)行。而 babel 會(huì)出現(xiàn)在 .bin 目錄下，又與 babel 項(xiàng)目中的 package.json 文件的 bin 配置項(xiàng)有關(guān)，具體的可以再去官方文獻(xiàn)中擴(kuò)展。

3. 小結(jié)

Babel 是一個(gè)很重要的工具，是現(xiàn)在編譯方案的首選。