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