鍓嶆部锛氭枃绔犵殑鐢辨潵鏄竴浣嶆湅鍙嬪憡璇変功姹燂紝鍦ㄨВ鍐抽」鐩IE11娴忚鍣ㄧ殑鍏煎杩囩▼涓紝閬囧埌浜嗏€滅溂鑺辩辑涔扁€濈殑babel閰嶇疆鍜屾彃浠剁瓑锛屼粬鍒嗕笉娓呴厤缃箣闂寸殑宸紓锛屼粬涓嶇煡閬撳浣曞弬鑰僢abel鎻掍欢璁╂€ц兘鏇村ソ銆傚鏋滀綘涔熷姝ゆ湁鐤戞儜锛岃繖绡囨枃绔犳垨璁搁€傚悎浣犮€?.浠€涔堟槸babelbabel锛烞abel鏈川涓婃槸涓€涓紪杈戝櫒锛屽嵆鈥滅炕璇戝櫒鈥濈殑瑙掕壊銆傛瘮濡備功姹熶笉鎳傝タ鐝墮璇紝闇€瑕佹湁浜哄府鎴戠炕璇戞垚涓枃銆傞偅涔圔abel灏辨槸甯姪娴忚鍣ㄨ繘琛岀炕璇戯紝璁﹚eb搴旂敤鍙互杩愯鍦ㄨ€佺増鏈殑娴忚鍣ㄤ腑銆傛瘮濡侷E11娴忚鍣ㄤ笉鏀寔Promise绛塃S6璇硶銆傛鏃讹紝褰撲綘鍦↖E11涓墦寮€浣犵殑web搴旂敤鏃讹紝搴旂敤鏃犳硶姝ｅ父杩愯銆傝繖鏃跺€欏氨闇€瑕丅abel鎶婂畠鈥滅炕璇戔€濇垚IE11鑳界湅鎳傜殑涓滆タ銆?.1Babel鏄浣曞伐浣滅殑锛熸湰璐ㄤ笂锛屼粎闈燘abel鏄棤娉曞畬鎴愨€滅炕璇戔€濈殑銆傛瘮濡傚畼缃戠殑渚嬪瓙constbabel=code=>code;鍦ㄦ病鏈塀abel鎻掍欢鐨勫墠鎻愪笅锛岃緭鍑轰笉浼氣€滅炕璇戔€濈澶村嚱鏁般€傚鏋滀綘鎯冲畬鎴愬畠锛屼綘闇€瑕佷娇鐢ㄥ畠鐨勬彃浠讹紝鏇村姒傚康璇风偣鍑诲畼鏂规枃妗ｃ€侭abel鐨勫伐浣滃師鐞嗘湰璐ㄤ笂灏辨槸瑙ｆ瀽銆佽浆鎹€佽緭鍑轰笁姝ワ紝濡備笅鍥攫煈囷紝1.2浠€涔堟槸AST锛燄煈ㄢ€嶐煄撻樋鏂屽悓瀛︼細涓婇潰璇寸殑鎶借薄璇硶鏍慉ST鏄粈涔堬紵绛旓細涓婇潰鎴戜滑鎻愬埌锛孊abel鍦ㄨВ鏋愭椂灏嗕唬鐮佽浆鍖栦负AST鎶借薄璇硶鏍戯紝鏈川涓婃槸瀵逛唬鐮佽娉曠粨鏋勭殑鎶借薄琛ㄧず锛屽皢鍏惰娉曠粨鏋勪互鏍戰煂插舰缁撴瀯鐨勫舰寮忚〃杈惧嚭鏉ャ€傛娊璞″湪浜庡畠鐨勮瑷€褰㈠紡涓嶄細鍙嶆槧鍦ㄥ師濮嬩唬鐮佷腑銆備笅闈粙缁嶄竴浜汚ST鍦ㄥ墠绔」鐩紑鍙戜腑鐨勫簲鐢ㄥ満鏅細Vue妯℃澘瑙ｆ瀽锛氭垜浠钩鏃跺啓鐨?vue鏂囦欢锛岄€氳繃vue-template-compiler瑙ｆ瀽锛?vue鏂囦欢琚鐞嗕负ASTBabel鐨勨€滅炕璇戔€濓細渚嬪锛屽湪ES6杞珽S5鐨勮繃绋嬩腑锛岃浆鎹㈠埌ASTwebpack鐨勬彃浠禪glifyJS锛歶glifyjs-webpack-plugin鐢ㄤ簬鍘嬬缉璧勬簮锛寀glifyjs浼氶亣鍒拌В鏋恊s6璇硶鐨勯渶姹傘€傚彲浠ラ€氳繃鏈湴瀹夎babel-cli杩涜楠岃瘉鏉ュ畨瑁卋abel-loader锛岄€氳繃babel-cli缂栬瘧js鏂囦欢锛岀帺杞€滅炕璇戔€濔煈ㄢ€嶐煄撻樋鏌悓瀛︼細涔︽睙锛屾垜鎯崇敤AST寮€鍙戜竴涓猙abel鎻掍欢銆傛垜闇€瑕佷娇鐢ㄤ粈涔堬紵绛旓細鎴戜滑鍦ㄤ笂涓€鑺備腑鎻愬埌锛宐abel鏃犳硶鍦ㄦ病鏈夆€滃鎻粹€濆府鍔╃殑鎯呭喌涓嬪畬鎴愮炕璇戯紝鑰屼竴涓畬鏁寸殑鈥滅炕璇戔€濊繃绋嬮渶瑕佺粡杩囪В鏋愩€佽浆鎹€佽緭鍑烘潵瀹屾垚鏁翠釜闂幆锛岃€屽叾涓瘡涓摼鎺ラ兘闇€瑕佷娇鐢ㄤ笅闈㈢殑babelAPI@babel/parser:babelparser灏嗘簮鐮佽В鏋愭垚AST@babel/generator:decodeAST鐢熸垚js浠ｇ爜newCode@babel/traverse:鐢ㄤ簬閬嶅巻AST鏍戯紝鍙互鐢ㄦ潵瀵笰ST杩涜鏀归€爚锛屾瘮濡傛浛鎹㈡垨鑰呮坊鍔犲師鏉ョ殑AST鑺傜偣@babel/core:鍖呮嫭浜嗘暣涓猙abel宸ヤ綔娴佺▼銆傝繖閲屾湁涓€涓畝鍗曠殑鈥滅炕璇戔€漝emo~馃懄锛氶樋瀹斤細浣犱笉鏄@babel/parser涔熸妸婧愮爜瑙ｆ瀽鎴怉ST浜嗗悧锛熶负浠€涔堜篃@babel/core锛熺瓟锛欯babel/core鍖呭惈鏁翠釜babel宸ヤ綔娴併€傚湪寮€鍙戞彃浠剁殑杩囩▼涓紝濡傛灉姣忎釜API閮藉崟鐙紩鍏ワ紝宀備笉鏄蹇芥偁浜嗭紵浜庢槸灏辨湁浜咢babel/coreplugin锛岄【鍚嶆€濅箟灏辨槸鏍稿績鎻掍欢锛屼粬灏佽浜嗗簳灞傜殑鎻掍欢锛堝寘鎷В鏋愬櫒锛岀敓鎴愬櫒绛夛級锛屾彁楂樹簡鍘熸湁鎻掍欢鐨勫紑鍙戞晥鐜囷紝绠€鍖栦簡娴佺▼锛屽苟涓旀槸銆婐煃熻偗寰峰熀鍏ㄥ妗躲€嬸煂叉帹鑽愰槄璇伙細Babel鎻掍欢鎵嬪唽锛屽疄鐜扮湡姝ｇ殑Babel鎻掍欢鐞嗚ВBabel鐨勫熀鏈師鐞嗗拰浣跨敤鏂规硶1.4Babel鎻掍欢璇村畬Babel鐨勫熀鏈娇鐢紝璁╂垜浠皥璋堟彃浠躲€傚墠鏂囨彁鍒帮紝鍗曢潬babel鏄€滈毦鎴愰珮鎵嬧€濓紝闇€瑕佸€熷姪鎻掍欢鎵嶈兘绉伴湼銆傞偅涔堟彃浠舵槸濡備綍宸ヤ綔鐨勫憿锛熼€氳繃绗竴鑺傜殑瀛︿範锛屾垜浠煡閬撳湪瀹屾垚绗竴姝ヨВ鏋愬畬AST涔嬪悗锛屾帴涓嬫潵灏辨槸杩涘叆杞崲浜嗐€傛彃浠跺湪杩欎釜闃舵璧风潃鍏抽敭浣滅敤銆?.4.1鎻掍欢鐨勪娇鐢ㄥ湪鍛婅瘔Babel鍋氫粈涔堜箣鍓嶏紝鎴戜滑闇€瑕佸垱寤轰竴涓狢onfiguration鏂囦欢.babelrc鎴栬€卋abel.config.js鏂囦欢濡傛灉鎴戞兂鎶奺s2015鐨勮娉曡浆鎴恊s5锛屾敮鎸乪s2020鐨勯摼鍐欙紝鎴戝彲浠ヨ繖鏍峰啓馃憜锛屽彲浠ョ湅鍒版垜浠厤缃簡present鍜宲lugin涓や釜涓滆タ馃懆鈥嶐煄撻樋瀹細Babel涓嶆槸鍙渶瑕佹彃浠舵潵甯繖缈昏瘧鍚楋紵杩欐槸浠€涔堢ぜ鐗╋紵绛旓細棰勮灏辨槸棰勮銆傛瘮濡傛煇澶╄垝姹熶細鍘昏偗寰峰熀涔伴浮缈呫€佽柉鏉°€佸彲涔愩€佹眽鍫″寘銆傜劧鍚庡彂鐜版湁涓€涓寘A锛岄噷闈㈡湁锛堣柉鏉★紝鍙箰锛屾眽鍫″寘锛夛紝閭ｄ箞杩欎釜绀肩墿灏辩浉褰撲簬鍖匒锛岄噷闈㈡湁涓€浜涙彃浠跺悎闆嗭紝涓€涓ぇ鍖咃紝鎵€浠ユ垜鍙渶瑕佷竴涓寘A+楦＄繀鎼炲畾锛屼笉鐢ㄩ厤缃緢澶氭彃浠躲€傚氨鍍忎笂闈㈢殑es2015鈥減ackage鈥濅竴鏍凤紝鍏跺疄Babel鍥㈤槦鎶婂緢澶欵S2015鐩稿叧鐨勬彃浠堕兘闆嗗悎鍒颁簡涓€涓猙abel-preset-es2015鐨刾reset涓煈ч樋涓冿細@babel/preset-env鏄粈涔堬紵鎴戠湅鍒板緢澶歜abel閰嶇疆閮芥湁绛旀锛欯babel/preset-env杩欐槸涓€涓猵resetpreset锛屾崲鍙ヨ瘽璇达紝鏄竴涓€滆豹鍗庡ぇ绀煎寘鈥濓紝鍖呮嫭涓€绯诲垪鎻掍欢鐨勯泦鍚堬紝鍖呮嫭鎴戜滑甯哥敤鐨別s2015銆乪s2016銆乪s2017绛夊緟鏈€鏂扮殑璇硶杞崲鎻掍欢锛岃鎴戜滑浣跨敤鏈€鏂扮殑js璇硶锛屾瘮濡俵et銆乧onst銆佺澶村嚱鏁扮瓑锛屼絾涓嶅寘鎷瑂tage-x鎻掍欢銆備篃灏辨槸璇达紝瀹冨寘鎷簡鎴戜滑涓婇潰鎻愬埌鐨別s2015锛岃繖鏄竴涓€滃叏瀹舵《鈥濓紝鑰屼笉浠呬粎鏄竴涓寘銆?.4.2鑷畾涔夌ぜ鐗煈﹂樋鏂岋細涔︽睙锛屾垜鍙互鑷繁鍋氫竴涓璁剧ぜ鐗╁悧锛熺瓟锛氬彲浠ワ紝浣嗘槸浣犲彲浠ユ柊寤轰竴涓」鐩紝鍛藉悕瑙勫垯涓篵abel-preset-*锛岀劧鍚庡垱寤轰竴涓猵ackjson骞跺畨瑁呭浐瀹氱殑渚濊禆鍜屼竴涓敤浜庡鍑?babelrc鐨刬ndex.js鏂囦欢锛屾渶鍚庡彂甯冨埌npm锛屽濡備笅鎵€绀?.4.3鍏充簬polyfill姣斿鎴戜滑鍦ㄥ紑鍙戜腑浣跨敤瀹冪殑鏃跺€欙紝浼氱敤鍒癳s6鐨勪竴浜涙柊鐗规€ф瘮濡侫rray.from绛夛紝浣嗘槸骞朵笉鏄墍鏈夌殑JavaScript鐜閮芥敮鎸丄rray.from銆傝繖鏃跺€欐垜浠彲浠ヤ娇鐢≒olyfill锛堜唬鐮佸～鍏咃紝涔熷彲浠ョ炕璇戞垚鍏煎鎬цˉ涓侊級锛屽洜涓篵abel鍙浆鎹㈡柊鐨刯s璇硶锛屾瘮濡傜澶村嚱鏁扮瓑锛屼笉浼氳浆鎹㈡柊鐨凙PI锛屾瘮濡傚叏灞€瀵硅薄渚嬪Symbol鍜孭romise銆傝繖鏃跺€欏氨闇€瑕佷娇鐢ˊbabel/polyfill锛屾潵瀹夎es鐨勬墍鏈夋柊鐗规€э紝浣跨敤姝ラ濡備笅npm瀹夎锛歯pminstall--save@babel/polyfill鍦ㄦ枃浠堕《閮ㄥ鍏olyfill锛歩mport@babel/polyfilll馃檯鈥嶁檪锔忥細缂虹偣锛氬叏灞€寮曞叆鏁翠釜polyfill鍖咃紝濡侾romise浼氬叏灞€寮曞叆锛屾薄鏌撳叏灞€鐜锛屼笉鎺ㄨ崘浣跨敤銆傛湁娌℃湁鏇村ソ鐨勫姙娉曪紵鍙互鐩存帴浣跨敤@babel/preset-env骞朵慨鏀归厤缃紝鍥犱负@babel/preset-env鍖呭惈浜咢babel/polyfill鎻掍欢锛岃涓嬩竴鑺?.4.4濡備綍閫氳繃淇敼@babel/瀹屾垚浠ヤ笂閰嶇疆preset-env閰嶇疆浼樺寲锛岀劧鍚庣敤babel缂栬瘧浠ｇ爜锛屾垜浠細鍙戠幇鏈夋椂鍊欏寘鐨勪綋绉緢澶э紝鍥犱负@babel/polyfill浼氳鍏ㄥ眬寮曠敤锛岃繖鏃跺€欏氨寰楁悶娓呮@babel/鐨勯厤缃簡preset-env@babel/preset-env涓嶡babel/polyfill鐩稿叧鐨勫弬鏁版湁涓や釜锛屽涓嬶細targets锛氭敮鎸佺殑鐩爣娴忚鍣ㄥ垪琛╱seBuiltIns锛氬弬鏁版湁鈥渆ntry鈥濄€佲€渦sage鈥濄€佲€渇alse鈥濅笁涓€笺€傞粯璁ゅ€间负鍋囥€傝鍙傛暟鍐冲畾浜哹abel鍦ㄦ墦鍖呮椂濡備綍澶勭悊@babel/polyfilll璇彞銆備富瑕佽useBuiltIns鐨勪笉鍚岄厤缃涓嬶細鍏ュ彛锛氬幓鎺夌洰鏍囨祻瑙堝櫒宸茬粡鏀寔鐨刾olyfilll妯″潡锛屽皢娴忚鍣ㄤ笉鏀寔鐨勫叏閮ㄥ紩鍏ュ搴旂殑polyfilll妯″潡銆倁sage锛氭墦鍖呮椂锛屼細鏍规嵁瀹為檯浠ｇ爜鐨勭敤娉曪紝缁撳悎targets锛岃嚜鍔ㄥ鍏ヤ唬鐮佷腑瀹為檯鐢ㄥ埌鐨勪竴浜沺olyfilll妯″潡銆俧alse锛氫笉浼氳嚜鍔ㄥ鍏olyfilll妯″潡锛屼細灞忚斀polyfilll妯″潡銆傛敮鎸佹儏鍐碉紝鏍规嵁闇€瑕佸鍏olyfill鏂囦欢锛岃繖鏍锋墦鍖呬綋绉笉浼氬お澶?.4.5濡備綍浣跨敤babel杩涜webpack鎵撳寘锛熷浜嶡babel/core銆丂babel/preset-env銆丂babel/polyfill绛夋彃浠讹紝鎴戜滑鍦ㄤ娇鐢╳ebpack鎵撳寘鐨勬椂鍊欙紝濡備綍璁﹚ebpack鐭ラ亾鎸夌収杩欎簺瑙勫垯缂栬瘧js銆傝繖鏃跺€欏氨闇€瑕乥abel-loader锛岀浉褰撲簬涓€涓腑闂存ˉ锛岄€氳繃璋冪敤babel/core涓殑API鍛婅瘔webpack濡備綍澶勭悊銆?.4.6寮€鍙戝伐鍏峰簱锛屼娇鐢╞abel鏃跺浣曢伩鍏嶆薄鏌撶幆澧冿紵馃懄闃挎枌鍚屽锛氭垜寮€鍙戜簡涓€涓伐鍏峰簱锛屼篃鐢ㄤ簡babel銆傚鏋滀娇鐢╬olyfill锛屽浣曢伩鍏嶄娇鐢ㄥ畠閫犳垚鐨勭幆澧冩薄鏌擄紵绛旓細寮€鍙戝伐鍏峰簱鎴栫粍浠跺簱鏃讹紝涓嶈兘鍐嶄娇鐢╞abel-polyfill锛屽惁鍒欏彲鑳介€犳垚鍏ㄥ眬姹℃煋锛屽彲浠ヤ娇鐢ˊbabel/runtime銆傚畠涓嶄細姹℃煋鎮ㄧ殑鍘熷鏂规硶銆傚綋閬囧埌闇€瑕佽浆鎹㈢殑鏂规硶鏃讹紝灏变細缁欏畠璧峰彟澶栦竴涓悕瀛楋紝鍚﹀垯浼氱洿鎺ュ奖鍝嶅埌浣跨敤璇ュ簱鐨勪笟鍔′唬鐮併€備娇鐢ˊbabel/runtime涓昏鏄负浜嗗噺灏戝簱鍜屽伐鍏峰寘鐨勫ぇ灏忥紝閬垮厤babel缂栬瘧鐨勫伐鍏峰嚱鏁板湪鍚勪釜妯″潡涓€傚湪浣跨敤@babel/runtime涔嬪墠锛屽簱鍜屽伐鍏峰寘涓€鑸笉浼氱洿鎺ュ紩鍏olyfill銆傚惁鍒欏儚Promise杩欐牱鐨勫叏灞€瀵硅薄浼氭薄鏌撳叏灞€鍛藉悕绌洪棿锛岄渶瑕佸簱鐨勪娇鐢ㄨ€呰嚜宸辨彁渚沺olyfill銆傝繖浜沺olyfill涓€鑸湪搴撳拰宸ュ叿鐨勪娇鐢ㄨ鏄庝腑閮戒細鎻愬埌銆備緥濡傦紝璁稿搴撳皢闇€瑕乪s5polyfill銆備娇鐢╞abel-runtime鍚庯紝搴撳拰宸ュ叿鍙渶瑕佸湪package.json涓babel-runtime娣诲姞渚濊禆锛屼氦缁檅abel-runtime寮曞叆polyfill鍗冲彲銆傚浣曚娇鐢ˊbabel/runtime1.npm瀹夎npminstall--save-dev@babel/plugin-transform-runtimenpminstall--save@babel/runtime2.閰嶇疆1.5鍏充簬babel鐨勬贩娣嗙偣1.5.1babel鐨勫尯鍒?core鍜孈babel/core馃懄:绗ㄥ悓瀛︼細babel-core鍜孈babel/core鏈変粈涔堝尯鍒紵鍥炵瓟;@babel鏄湪babel7涓彁鍑虹殑锛岀被浼间簬vue-cli鍗囩骇鍚庝娇鐢ˊvue/cli锛屾墍浠abel7涔嬪悗鐨勭増鏈竴寮€濮嬪氨浣跨敤@babel鏉ュ０鏄庝綔鐢ㄥ煙銆?/p>
