babel 7 簡單指北
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。
其實就是看使用場景吧,畢竟各有利弊。