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...