babel 7 簡單指北

Babel · 發表 2019-04-22 23:18:00

摘要： babel 7 對於 babel 7，babel 的官網已經介紹得非常詳細了，但有時感覺文件和實際使用總是差那麼一點東西。主要包先來看一下主要的包，babel 7 對於包進行了一些簡化。 @babel/cli : 用於執行相應命令...

babel 7

對於 babel 7，babel 的官網已經介紹得非常詳細了，但有時感覺文件和實際使用總是差那麼一點東西。

主要包

先來看一下主要的包，babel 7 對於包進行了一些簡化。

@babel/cli : 用於執行相應命令
@babel/core : 核心包，將 js 程式碼分析成 AST
@babel/preset-env : 包含 es6+ 的語法轉換規則，如箭頭函式、const 等
@babel/polyfill : es6 內建物件和函式的墊片，如 Promise、Array.from 等
@babel/plugin-transform-runtime : 防止 polyfill 汙染全域性變數
@babel/runtime : 與 @babel/plugin-transform-runtime 配套使用

安裝 babel 7

npm init -y
npm i -S @babel/cli @babel/core

安裝完之後，可以看見 package.json 下有 babel 的資訊。

{
"name": "babel_7",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3"
}
}

新建一個 src 目錄，並在目錄下建立一個 index.js：

// src/index.js
const sum = (a, b) => a + b

接著新建 dist 目錄，存放打包檔案，然後執行命令：

npx babel src/index.js -d dist/

可以在 dist 下看見轉換後的 index.js，但內容一模一樣，因為 @babel/core 只複製把程式碼轉換為 AST，然後 babel 又把 AST 轉為程式碼，中間並沒有做任何處理。

@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

配置

babel 7 提供了 3 種通過檔案進行配置的方式。

babel.config.js

適用場景：以程式設計的方式建立配置檔案，希望編譯node_modules 目錄下的模組

module.exports = function (api) {
api.cache(true);

const presets = [ ... ];
const plugins = [ ... ];

return {
presets,
plugins
};
}

.babelrc

適用場景：簡單的靜態配置

{
"presets": [...],
"plugins": [...]
}

也可以將上面的配置移到 package.json 中：

{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}

.babelrc.js

適用場景和 babel.config.js 類似

const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };

還可以呼叫 Node.js 的任何 API，例如基於程序環境進行動態配置：

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
plugins.push(...);
}

module.exports = { presets, plugins };

@babel/polyfill、@babel/preset-env

npm i -S @babel/polyfill
npm i -D @babel/preset-env

安裝完之後，在根目錄下建立 .babelrc 檔案，進行一些簡單配置:

{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}

再將 src/index.js 改一下：

// src/index.js
import "@babel/polyfill"

let list = new Set()
list.set(0, 'hhh')

const sum = (a, b) => a + b

然後執行轉換命令：

npx babel src/index.js -d dist/

然後會發現 dist/index.js 中 es6+ 的語法轉換為了 es5，而且還添加了一堆require(...) ，這些都是 polyfill，但沒用到的一些東西也依然打包進來了，對於這種情況，babel 7 提供了useBuiltIns 。

useBuiltIns

useBuiltIns: "usage", "entry", "false"。預設為 false。

usage: 在每個檔案中使用 polyfill 時，為 polyfill 新增特定匯入，babel 利用捆綁器只加載一次相同的polyfill。

entry: 使用 entry 屬性，必須在專案入口處引入一次 @babel/polyfill。然後 babel 在做程式碼轉換的時候，會把

import @babel/polyfill

轉成

require("core-js/modules/es6.array.copy-within");
require("core-js/modules/es6.array.every");
require("core-js/modules/es6.array.fill");
// more

false: 不引入 polyfill

將 .babelrc 下的useBuiltIns 改為usage ，再執行轉換命令，就會發現 polyfill 變成了按需匯入。

targets

babel 7 還提供了targets ，這個配置主要用於指定需要支援的環境，一般是指瀏覽器版本。（ targets 還可以指定 node、android、ios、electron 等其他環境）

設定了 targets，babel 在轉換前，會先檢查 targets 指定的環境已經支援了哪些新語法和 API，然後就不再轉換或者不引入已經支援的內容。

配置 targets，依然是修改 .babelrc 檔案：

{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}
]
]
}

@babel/plugin-transform-runtime、@babel/runtime

使用 @babel/polyfill 會對全域性物件進行汙染，所以可以使用 @babel/plugin-transform-runtime 和@babel/runtime 防止這種現象。

@babel/plugin-transform-runtime 會在你需要的地方自動引入你使用到的新方法。

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime

安裝完畢之後依然是修改 .babelrc 檔案：

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}

然後修改一下 src/index.js：

// src/index.js

class Person {
constructor (name) {
this.name = name
}
}

然後用命令進行轉換，會發現轉換結果和使用 @babel/polyfill 是有一點不一樣的。

注意：如果使用 @babel/runtime 的話，一些類的例項方法如：foobar.includes("foo") 將無法工作。因為它必須在原生物件的原型鏈上進行修改。

區別

看了上面的做法，你可能會覺得困惑，為什麼要一起使用 @babel/plugin-transform-runtime、@babel/runtime 呢，為什麼不能單獨使用一個？

其實是因為 babel 轉換時，@babel/plugin-transform-runtime 這個外掛會自動引入使用到的新方法，而引入的這些 polyfill 包是在 @babel/runtime 裡面的，所以 @babel/runtime 需要安裝在 dependency（生產環境）下，@babel/plugin-transform-runtime 則安裝在 devDependency（開發環境）下。

使用哪一個？

至於是使用 @babel/polyfill，還是 @babel/runtime，我也不太清楚，網上的說法大致都是：

一般庫或工具中使用 @babel/runtime，因為它可以避免全域性的汙染。如果是專案中可以直接使用 @babel/polyfill。

其實就是看使用場景吧，畢竟各有利弊。