Gulp打包支持Await/Async語法
本文轉(zhuǎn)載自微信公眾號(hào)「前端學(xué)苑」，作者前端小賈。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端學(xué)苑公眾號(hào)。
簡短的概括：
1使用 ES7 的 async/await 時(shí)報(bào)錯(cuò)
在項(xiàng)目中，最近需要對(duì)node代碼進(jìn)行混淆編譯，原來曾經(jīng)解決過ES6打包混淆的問題，在使用的是gulp打包，為了提升代碼質(zhì)量還有異步操作順序問題，使用了async/await語法，原來的gulpfile混淆又出問題了。
出現(xiàn)問題：
打包完后瀏覽器報(bào)錯(cuò)gulp
- Uncaught ReferenceError: regeneratorRuntime is not defined
對(duì) babel polyfill 的一些理解
一、babel 和 babel ployfill 的關(guān)系
1、先來理解下 babel 到底是做什么的?
簡單來講，babel解決語法層面的問題。用于將ES6+的高級(jí)語法轉(zhuǎn)為ES5。
2、babel polyfill 又是做什么的?
如果要解決API層面的問題，需要使用墊片。比如常見的有babel-polyfill、babel-runtime 和 babel-plugin-transform-runtime。
理清了他們之間的關(guān)系，那么再正式來講講有關(guān)polyfill的二三事。
二、polyfill 種類
babel polyfill 有三種
- * babel-polyfill
- * babel-runtime
- * babel-plugin-transform-runtime
1babel-polyfill
babel-polyfill通過向全局對(duì)象和內(nèi)置對(duì)象的prototype上添加方法來實(shí)現(xiàn)的。所以這會(huì)造成全局空間污染。
babel-polyfill使用的兩種方式
1) webpack.config.js 中：
配置webpack.config.js里的entry設(shè)置為entry: ['babel-polyfill',path.join(__dirname, 'index.js')]
2) 業(yè)務(wù) js 中：
在webpack.config.js配置的主入口index.js文件的最頂層鍵入
- import 'babel-polyfill'
兩者打印出來的大小都是一樣的，打包后大小是280KB，如果沒有使用babel-polyfill，大小是3.43kb。兩則相差大概81.6倍。原因是webpack把babel-polyfill整體全部都打包進(jìn)去了。而babel-polyfill肯定也實(shí)現(xiàn)了所有ES6新API,文件一定不會(huì)小。
那么有沒有一種辦法,根據(jù)實(shí)際代碼中用到的ES6新增API ,來使用對(duì)應(yīng)的墊片,而不是全部加載進(jìn)去呢?
是的，有的。那就是 babel-runtime & babel-plugin-transform-runtime，他們可以實(shí)現(xiàn)按需加載。
2babel-runtime
簡單說 babel-runtime 更像是一種按需加載的實(shí)現(xiàn)，比如你哪里需要使用 Promise，只要在這個(gè)文件頭部
- import Promise from 'babel-runtime/core-js/promise'
不過如果你許多文件都要使用 Promise，難道每個(gè)文件都要 import 一下嗎?當(dāng)然不是，Babel 官方已考慮這種情況，只需要使用 babel-plugin-transform-runtime 就可以解決手動(dòng) import 的苦惱了。
3babel-plugin-transform-runtime
babel-plugin-transform-runtime 裝了就不需要裝 babel-runtime了，因?yàn)榍罢咭蕾嚭笳摺?/p>
總的來說，babel-plugin-transform-runtime 就是可以在我們使用新 API 時(shí) 自動(dòng) import babel-runtime 里面的 polyfill，具體插件做了以下三件事情：
1) 當(dāng)我們使用 async/await 時(shí)，自動(dòng)引入 babel-runtime/regenerator;
2) 當(dāng)我們使用 ES6 的靜態(tài)事件或內(nèi)置對(duì)象時(shí)，自動(dòng)引入 babel-runtime/core-js;
3) 移除內(nèi)聯(lián) babel helpers 并替換使用 babel-runtime/helpers 來替換;
babel-plugin-transform-runtime 優(yōu)點(diǎn)：
1) 不會(huì)污染全局變量;
2) 多次使用只會(huì)打包一次;
3) 依賴統(tǒng)一按需引入,無重復(fù)引入,無多余引入;
4) 避免 babel 編譯的工具函數(shù)在每個(gè)模塊里重復(fù)出現(xiàn)，減小庫和工具包的體積;
使用方式
在 .babelrc 中配置：
- plugins:\["tranform-runtime"\]
打包后大小為 17.4kb，比之前的280kb要小很多。
gulp打包報(bào)錯(cuò) - 問題分析與解決方案
頁面 是用gulp起的服務(wù)，然后寫的代碼，這次是在js里用了es7的async/await，導(dǎo)致打包完之后報(bào)錯(cuò)：
Uncaught ReferenceError: regeneratorRuntime is not defined
一、原因分析(regeneratorRuntime函數(shù))
在程序中使用了 async/await ，經(jīng)過@babel/preset-env 解析后會(huì)將代碼轉(zhuǎn)換為一個(gè)名為regeneratorRuntime的函數(shù)，但是轉(zhuǎn)換后的代碼僅僅存在這個(gè)函數(shù)的調(diào)用，并沒有具體的定義體現(xiàn)。
通過百度，好多人會(huì)告訴你讓你去裝一個(gè)叫做
- 'transform-runtime'
transform-runtime插件是運(yùn)行在node服務(wù)器上的，所以即使你裝了，瀏覽器照樣不認(rèn)識(shí)。
二、解決方案(babel-polyfill編譯)
需要的在gulp-babel給你編譯的時(shí)候，把regeneratorRuntime再轉(zhuǎn)換一次，這就用到了babel的babel-polyfill。
安裝完成以后，在node_modules里邊找到這個(gè)包，然后把dist下的polyfill.min.js這個(gè)js引入到頁面的head里邊去，這樣再一次打包的時(shí)候，_asyncToGenerator 這個(gè)東西就會(huì)返回一個(gè)函數(shù)了，函數(shù)瀏覽器是認(rèn)識(shí)的，再運(yùn)行一下項(xiàng)目就沒問題了。
