骞茶揣 - gulp鎵撳寘鏀寔await/async璇硶

Posted 2021-06-16 鍓嶇瀛﹁嫅

鍏虫敞鈥?/span> 鍓嶇瀛﹁嫅 鈥?锛屽潥鎸佹瘡澶╄繘姝ヤ竴鐐圭偣

銆寏 gulp鎵撳寘鏀寔es7璇硶 ~銆?/span>

* 瀛︿範杩涢樁鏂瑰紡 馃挭

鍩虹鐭ヨ瘑瑕佸く瀹烇紱

鍘熺悊婧愮爜瑕佹繁鍏ワ紱

娣卞害骞垮害瑕佹墿灞曪紱

绠€鐭殑姒傛嫭锛?/span>

1锝や娇鐢?ES7 鐨?async/await 鏃舵姤閿?/span>

鍦ㄩ」鐩腑锛屾渶杩戦渶瑕佸node浠ｇ爜杩涜娣锋穯缂栬瘧锛屽師鏉ユ浘缁忚В鍐宠繃ES6鎵撳寘娣锋穯鐨勯棶棰橈紝鍦ㄤ娇鐢ㄧ殑鏄痝ulp鎵撳寘锛屼负浜嗘彁鍗囦唬鐮佽川閲忚繕鏈?/span>寮傛鎿嶄綔椤哄簭闂锛屼娇鐢ㄤ簡async/await璇硶锛屽師鏉ョ殑gulpfile娣锋穯鍙堝嚭闂浜嗐€?/span>

鍑虹幇闂锛?/span>

鎵撳寘瀹屽悗娴忚鍣ㄦ姤閿檊ulp

Uncaught ReferenceError: regeneratorRuntime is not defined

---

瀵?babel polyfill 鐨勪竴浜涚悊瑙?/strong>

---

涓€銆乥abel 鍜?babel ployfill 鐨勫叧绯?/span>

1銆佸厛鏉ョ悊瑙ｄ笅 babel 鍒板簳鏄仛浠€涔堢殑锛?/span>

绠€鍗曟潵璁诧紝babel瑙ｅ喅璇硶灞傞潰鐨勯棶棰?/span>銆傜敤浜庡皢ES6+鐨勯珮绾ц娉曡浆涓篍S5銆?/span>

2銆乥abel polyfill 鍙堟槸鍋氫粈涔堢殑锛?/span>

濡傛灉瑕佽В鍐?span class="mq-46">API灞傞潰鐨勯棶棰?/span>锛岄渶瑕佷娇鐢ㄥ灚鐗囥€傛瘮濡傚父瑙佺殑鏈?/span> babel-polyfill 銆?/span> babel-runtime  鍜?nbsp; babel-plugin-transform-runtime 銆?/span>

鐞嗘竻浜嗕粬浠箣闂寸殑鍏崇郴锛岄偅涔堝啀姝ｅ紡鏉ヨ璁叉湁鍏?/span>polyfill鐨勪簩涓変簨銆?/span>

浜屻€乸olyfill 绉嶇被

babel polyfill 鏈変笁绉?/span>

* babel-polyfill
* babel-runtime
* babel-plugin-transform-runtime

1锝abel-polyfill

babel-polyfill閫氳繃鍚戝叏灞€瀵硅薄鍜屽唴缃璞＄殑prototype涓婃坊鍔犳柟娉曟潵瀹炵幇鐨勩€傛墍浠ヨ繖浼氶€犳垚鍏ㄥ眬绌洪棿姹℃煋銆?/span>

babel-polyfill浣跨敤鐨勪袱绉嶆柟寮?/span>

1) webpack.config.js 涓細
閰嶇疆webpack.config.js閲岀殑entry璁剧疆涓篹ntry: ['babel-polyfill',path.join(__dirname, 'index.js')]

2) 涓氬姟 js 涓細
鍦╳ebpack.config.js閰嶇疆鐨勪富鍏ュ彛index.js鏂囦欢鐨勬渶椤跺眰閿叆

import 'babel-polyfill'

涓よ€呮墦鍗板嚭鏉ョ殑澶у皬閮芥槸涓€鏍风殑锛屾墦鍖呭悗澶у皬鏄?80KB锛屽鏋滄病鏈変娇鐢╞abel-polyfill锛屽ぇ灏忔槸3.43kb銆備袱鍒欑浉宸ぇ姒?1.6鍊嶃€傚師鍥犳槸webpack鎶奲abel-polyfill鏁翠綋鍏ㄩ儴閮芥墦鍖呰繘鍘讳簡銆傝€宐abel-polyfill鑲畾涔熷疄鐜颁簡鎵€鏈塃S6鏂癆PI,鏂囦欢涓€瀹氫笉浼氬皬銆?br>

閭ｄ箞鏈夋病鏈変竴绉嶅姙娉?鏍规嵁瀹為檯浠ｇ爜涓敤鍒扮殑ES6鏂板API ,鏉ヤ娇鐢ㄥ搴旂殑鍨墖,鑰屼笉鏄叏閮ㄥ姞杞借繘鍘诲憿?
鏄殑锛屾湁鐨勩€傞偅灏辨槸 babel-runtime & babel-plugin-transform-runtime锛屼粬浠彲浠ュ疄鐜版寜闇€鍔犺浇銆?/span>

2锝abel-runtime

绠€鍗曡 babel-runtime 鏇村儚鏄竴绉嶆寜闇€鍔犺浇鐨勫疄鐜帮紝姣斿浣犲摢閲岄渶瑕佷娇鐢?Promise锛屽彧瑕佸湪杩欎釜鏂囦欢澶撮儴

import Promise from 'babel-runtime/core-js/promise'

涓嶈繃濡傛灉浣犺澶氭枃浠堕兘瑕佷娇鐢?Promise锛岄毦閬撴瘡涓枃浠堕兘瑕?import 涓€涓嬪悧锛熷綋鐒朵笉鏄紝Babel 瀹樻柟宸茶€冭檻杩欑鎯呭喌锛屽彧闇€瑕佷娇鐢?nbsp;babel-plugin-transform-runtime 灏卞彲浠ヨВ鍐虫墜鍔?import 鐨勮嫤鎭间簡銆?/span>

3锝abel-plugin-transform-runtime

babel-plugin-transform-runtime 瑁呬簡灏变笉闇€瑕佽 babel-runtime浜嗭紝鍥犱负鍓嶈€呬緷璧栧悗鑰呫€?br class="mq-102">鎬荤殑鏉ヨ锛宐abel-plugin-transform-runtime 灏辨槸鍙互鍦ㄦ垜浠娇鐢ㄦ柊 API 鏃?nbsp;鑷姩 import babel-runtime 閲岄潰鐨?polyfill锛屽叿浣撴彃浠跺仛浜嗕互涓嬩笁浠朵簨鎯咃細

1) 褰撴垜浠娇鐢?async/await 鏃讹紝鑷姩寮曞叆 babel-runtime/regenerator锛?/span>

2) 褰撴垜浠娇鐢?ES6 鐨勯潤鎬佷簨浠舵垨鍐呯疆瀵硅薄鏃讹紝鑷姩寮曞叆 babel-runtime/core-js锛?/span>

3) 绉婚櫎鍐呰仈 babel helpers 骞舵浛鎹娇鐢?babel-runtime/helpers 鏉ユ浛鎹紱

babel-plugin-transform-runtime 浼樼偣锛?/span>

1) 涓嶄細姹℃煋鍏ㄥ眬鍙橀噺锛?/span>

2) 澶氭浣跨敤鍙細鎵撳寘涓€娆★紱

3) 渚濊禆缁熶竴鎸夐渶寮曞叆,鏃犻噸澶嶅紩鍏?鏃犲浣欏紩鍏ワ紱

4) 閬垮厤 babel 缂栬瘧鐨勫伐鍏峰嚱鏁板湪姣忎釜妯″潡閲岄噸澶嶅嚭鐜帮紝鍑忓皬搴撳拰宸ュ叿鍖呯殑浣撶Н锛?/span>

浣跨敤鏂瑰紡

鍦?.babelrc 涓厤缃細

plugins:\["tranform-runtime"\]

鎵撳寘鍚庡ぇ灏忎负 17.4kb锛屾瘮涔嬪墠鐨?80kb瑕佸皬寰堝銆?/span>

---

gulp鎵撳寘鎶ラ敊 - 闂鍒嗘瀽涓庤В鍐虫柟妗?/strong>

---

椤甸潰 鏄敤gulp璧风殑鏈嶅姟锛岀劧鍚庡啓鐨勪唬鐮侊紝杩欐鏄湪js閲岀敤浜唀s7鐨刟sync/await锛屽鑷存墦鍖呭畬涔嬪悗鎶ラ敊锛?/span>

Uncaught ReferenceError: regeneratorRuntime is not defined

涓€銆佸師鍥犲垎鏋愶紙regeneratorRuntime鍑芥暟锛?/span>

鍦ㄧ▼搴忎腑浣跨敤浜?async/await 锛岀粡杩嘆babel/preset-env 瑙ｆ瀽鍚庝細灏嗕唬鐮佽浆鎹负涓€涓悕涓?/span>regeneratorRuntime鐨勫嚱鏁?/span>锛屼絾鏄浆鎹㈠悗鐨勪唬鐮佷粎浠呭瓨鍦ㄨ繖涓嚱鏁扮殑璋冪敤锛屽苟娌℃湁鍏蜂綋鐨勫畾涔変綋鐜般€?/span>

閫氳繃鐧惧害锛屽ソ澶氫汉浼氬憡璇変綘璁╀綘鍘昏涓€涓彨鍋?/span>

'transform-runtime'

transform-runtime鎻掍欢鏄繍琛?span>鍦╪ode鏈嶅姟鍣ㄤ笂鐨勶紝鎵€浠ュ嵆浣夸綘瑁呬簡锛屾祻瑙堝櫒鐓ф牱涓嶈璇嗐€?br>

浜屻€佽В鍐虫柟妗堬紙babel-polyfill缂栬瘧锛?/span>

闇€瑕佺殑鍦╣ulp-babel缁欎綘缂栬瘧鐨勬椂鍊欙紝鎶妑egeneratorRuntime鍐嶈浆鎹竴娆★紝杩欏氨鐢ㄥ埌浜哹abel鐨刡abel-polyfill銆?/span>

瀹夎瀹屾垚浠ュ悗锛屽湪node_modules閲岃竟鎵惧埌杩欎釜鍖咃紝鐒跺悗鎶?/span>dist涓嬬殑polyfill.min.js杩欎釜js寮曞叆鍒伴〉闈㈢殑head閲岃竟鍘?/span>锛岃繖鏍峰啀涓€娆℃墦鍖呯殑鏃跺€欙紝_asyncToGenerator  杩欎釜涓滆タ灏变細杩斿洖涓€涓嚱鏁颁簡锛屽嚱鏁版祻瑙堝櫒鏄璇嗙殑锛屽啀杩愯涓€涓嬮」鐩氨娌￠棶棰樹簡銆?/span>

鎺ㄨ崘鐑棬鎶€鏈枃绔狅細

閲戜笁閾跺洓锛屼竴绾块珮棰戦潰璇曢 锛?/strong>鎯虫繁鍏ョ湅杩欓噷锛?/strong>

鎬ц兘浼樺寲鍐冲畾涓€鍒?nbsp;锛?/strong>鎯虫繁鍏ョ湅杩欓噷锛?/strong>

瑙夊緱鏈枃瀵逛綘鏈夊府鍔╋紵璇峰垎浜粰鏇村浜?/span>

鍏虫敞銆屽墠绔鑻戙€嶅姞鏄熸爣锛屾彁鍗囧墠绔妧鑳?/span>

濡傛灉瑙夊緱杩欑瘒鏂囩珷杩樹笉閿欙紝鏉ヤ釜銆愬垎浜€佺偣璧炪€佸湪鐪嬨€戜笁杩炲惂锛岃鏇村鐨勪汉涔熺湅鍒皛