babel 7 簡單指北

2022-07-26 02:36:15 字數 3933 閱讀 1781

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

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

npm init -y

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

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

,

"keywords": ,

"author": "",

"license": "isc",

"dependencies":

}

新建乙個 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) ;

}

.babelrc

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

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

}

.babelrc.js

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

const presets = [ ... ];

const plugins = [ ... ];

module.exports = ;

還可以呼叫 node.js 的任何 api,例如基於程序環境進行動態配置:

const presets = [ ... ];

const plugins = [ ... ];

if (process.env["env"] === "prod")

module.exports = ;

npm i -s @babel/polyfill

npm i -d @babel/preset-env

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

]]}

再將 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。

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

targets

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

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

配置 targets,依然是修改 .babelrc 檔案:

}]

]}

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

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

npm i -d @babel/plugin-transform-runtime

npm i -s @babel/runtime @babel/runtime-corejs2

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

]]}

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

// src/index.js

class person

}

然後用命令進行轉換,會發現轉換結果和使用 @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。

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

babel7 版本配置問題

版本問題導致的babel配置出錯 1 先將我們所下的包解除安裝,當然之前還是先檢視一下babel cli的版本 解除安裝之後重新執行 cnpm i babel cli babel core babel plugin transform runtime babel preset env babel p...

公升級到Babel 7的經驗

babel的最新版本babel 7 已經在henry zhu的不斷努力下發布了,他真的是全身心地投入到了babel的開發中,而babel對於前端界的貢獻也是有目共睹,沒有這個神奇的編譯器,前端界要落地es6語法恐怕還要再等十年。最近我在給自己團隊的ui元件庫公升級到babel 7,沒有想象中那麼難,...

babel jest不支援babel7的解決方案

jest本身不支援es6語法,需要使用babel jest外掛程式進行轉換 babel jest不支援babel7版本 所以jest執行會報錯,後來在網上找到了解決方案 babel core 7.0.0 bridge.0外掛程式 yarn add dev babel core 7.0.0 bridg...