你一定碰到過這些庫(kù)

babel-polyfill

項(xiàng)目地址：https://github.com/babel/babel/blob/master/packages/babel-polyfill

通過兩個(gè)依賴實(shí)現(xiàn)功能

• core-js/shim?提供 ES5/6/7 標(biāo)準(zhǔn)方法的實(shí)現(xiàn)
• regenerate-runtime?提供 async 語法編譯后的的運(yùn)行時(shí)環(huán)境（下文會(huì)專門說明）

babel-plugin-transform-runtime

項(xiàng)目地址：https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime

開發(fā) ES6/7 新特性的庫(kù)推薦使用該插件，需要注意的是，安裝時(shí)，必須同時(shí)安裝?babel-runtime?作為依賴：

npm install --save-dev babel-plugin-transform-runtime npm install --save babel-runtime // `babel-plugin-transform-runtime` 插件本身其實(shí)是依賴于 `babel-runtime` 的，但為了適應(yīng) `npm install --production` 強(qiáng)烈建議添加該依賴。

插件會(huì)將 es6/7 的語法轉(zhuǎn)化為 es5 兼容的格式，并提供運(yùn)行時(shí)依賴。什么是運(yùn)行時(shí)依賴？比如你要用 Array.from 方法，該方法的具體實(shí)現(xiàn)必須在代碼的執(zhí)行環(huán)境中提供，這就是運(yùn)行時(shí)依賴。

該插件在轉(zhuǎn)化語法時(shí)，不會(huì)污染全局環(huán)境。而?babel-polyfill?則會(huì)污染全局環(huán)境。

babel-plugin-external-helpers

項(xiàng)目地址：https://github.com/babel/babel/blob/master/packages/babel-plugin-external-helpers/

代碼很少，只依賴于?babel-runtime。相比較?babel-plugin-transform-runtime?會(huì)在每個(gè)模塊注入運(yùn)行時(shí)代碼，該插件會(huì)將運(yùn)行時(shí)代碼打包，類似封裝到一個(gè)對(duì)象下，這樣避免注入重復(fù)的代碼。

讓 async/await 跑起來

通過最簡(jiǎn)單的一個(gè)函數(shù)：

async function foo() {return await 1 }foo().then(function(val) {console.log(val) // should output 1 })

說明這些 babel 插件怎么搭配，三種方案：

方案一：regenerator

.babelrc?如下配置：

{"plugins": ["transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"] }

• babel-plugin-transform-regenerator 將?async/await?語法轉(zhuǎn)化成?regenerator?庫(kù)支持的語法
• transform-runtime 將運(yùn)行時(shí)注入，類似：import regenerator from 'babel-runtime/regenerator'
• babel-plugin-transform-es2015-modules-commonjs 只是為了將 import 轉(zhuǎn)化為 require，便于在 node.js 模塊下執(zhí)行（如果你的執(zhí)行環(huán)境支持 es6 的模塊機(jī)制，則不需要該插件）。

方案二：generator

這種方式，最適合 node.js 環(huán)境，node.js 最早從 0.11 開始，便支持 generator。.babelrc?如下配置：

{"plugins": ["babel-plugin-transform-async-to-generator"] }

生成的代碼，在 node.js 環(huán)境下可以直接執(zhí)行，此時(shí)便不再需要 babel 提供任何有關(guān) generator 相關(guān)的運(yùn)行時(shí)環(huán)境了，直接 node.js 自帶~

方案三：babel-polyfill

.babelrc?如下配置：

{"plugins": ["babel-plugin-transform-regenerator"] }

其實(shí)和前面?regenerate?一樣，去掉了?runtime?配置。編譯結(jié)束后，需要手動(dòng)在結(jié)果文件的第一行加入：

require('babel-polyfill')

通過?babel-polyfill?向全局注入運(yùn)行時(shí)依賴。那什么時(shí)候該用?babel-polyfill?什么時(shí)候用?babel-runtime？官網(wǎng)給出了解釋：

This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool.

• 如果是應(yīng)用級(jí)別的開發(fā)，可以考慮使用?babel-polyfill：大而全，支持所有的 es2015+ 特性。可以在項(xiàng)目入口處統(tǒng)一添加，也可以通過打包工具配置入口。
• 如果是開發(fā)一個(gè)庫(kù)，使用?babel-runtime，不會(huì)污染全局，而且是根據(jù)情況注入需要的運(yùn)行時(shí)環(huán)境。

關(guān)于 babel-runtime 更多細(xì)節(jié)，強(qiáng)烈建議閱讀官方文檔：https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/README.md

別忘了 externel-helpers

剛剛只是一個(gè)簡(jiǎn)單的 foo 函數(shù)，一個(gè)文件。多個(gè)文件時(shí)，存在每個(gè)文件都注入類似?asyncToGenerator?等輔助方法，導(dǎo)致重復(fù)。舉例說明：

foo.js

'use strict'const bar = require('./bar')async function foo () {const val = await bar()console.log(val) }foo()

bar.js

'use strict'module.exports = async function bar () {return await 'bar' }

采用前文提到的?generator?方式，去編譯，會(huì)發(fā)現(xiàn)結(jié)果文件中，都有?_asyncToGenerator?定義。修改?.babelrc?如下：

{"plugins": ["babel-plugin-transform-async-to-generator", "babel-plugin-external-helpers"] }

再編譯，_asyncToGenerator?都變成了?babelHelpers.asyncToGenerator。這樣，多個(gè)模塊之間沒有重復(fù)的代碼注入，更加干凈清爽。不過此時(shí)?babelHelpers?是未定義，仍然需要引入運(yùn)行時(shí)環(huán)境：?transform-runtime，最終可以運(yùn)行的配置如下：

{"plugins": ["babel-plugin-transform-async-to-generator","babel-plugin-external-helpers","transform-runtime","babel-plugin-transform-es2015-modules-commonjs"] }

示例代碼見：https://github.com/sabakugaara/babel-example

本文整理自：https://github.com/sabakugaara/sabakugaara.github.io/issues/8

轉(zhuǎn)載于:https://www.cnblogs.com/chris-oil/p/10747527.html

總結(jié)

以上是生活随笔為你收集整理的[转] 以 async/await 为例，说明 babel 插件怎么搭的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。