babel.js锛欱abel.js涓嶄粎瑙ｅ喅浜嗕娇鐢‥S6鐨勯棶棰橈紝杩樺鍔犱簡寰堝鏂扮殑鍔熻兘锛屾敮鎸佹洿澶氱殑缂栬瘧闇€姹傘€傛湁涓ょ鏂规硶鍙互瑙ｅ喅缂栬瘧JavaScript鏃朵笉鍚屾祻瑙堝櫒瀵笶S6鏀寔涓嶄竴鑷寸殑闂銆備竴绉嶆槸缂栬瘧锛屼竴绉嶆槸polyfill銆備袱鑰呬箣闂存病鏈夋槑鏄剧殑鐣岄檺锛屼絾澶ц嚧鐨勫尯鍒槸缂栬瘧浼氬湪杩愯涔嬪墠灏嗕唬鐮佽浆鎹㈡垚浣庣増鏈殑浠ｇ爜锛岀劧鍚庡啀杩愯銆俻olyfill鏄湪杩愯鏃跺垽鏂祻瑙堝櫒鏄惁鏀寔鏌愪釜鍔熻兘锛屼笉鏀寔鎵嶄娇鐢╬atchcode锛涘鏋滃畠鏀寔瀹冿紝璇蜂娇鐢ㄦ湰鏈哄姛鑳姐€備粖澶╋紝鎴戜滑鍏虫敞鐨勬槸杩欐牱缂栬瘧銆傚湪杩囧幓寰堥暱涓€娈垫椂闂撮噷锛孊abel閮芥彁渚涗簡涓€涓紪璇戝伐鍏凤紝甯姪寮€鍙戣€呬娇鐢ㄤ笅涓€浠avaScript鐗堟湰鎻愬墠缂栧啓浠ｇ爜銆傚畠鍙互灏咵S6+浠ｇ爜缂栬瘧鎴愬悜鍚庡吋瀹圭殑鐗堟湰銆備綘鍙兘浼氶棶锛岀紪璇戜笉鏄祻瑙堝櫒鐨勫伐浣滃悧锛熶负浠€涔堟垜浠Babel鏄竴涓紪璇戝櫒锛熶簨瀹炰笂锛孊abel鏄竴绉嶄粠婧愪唬鐮佸埌婧愪唬鐮佺殑缂栬瘧锛岃€屼笉鏄粠婧愪唬鐮佸埌鏈哄櫒浠ｇ爜锛屾墍浠ヤ负浜嗗尯鍒簬娴忚鍣ㄤ腑鐨凧avaScript寮曟搸锛孊abel涔熻绉颁负鈥渢ranscompiler鎴杢ranspiler鈥濄€傜炕璇戞柊鍔熻兘锛屼互渚垮紑鍙戜汉鍛樺彲浠ヤ娇鐢ㄦ柊鐨凧S鍔熻兘銆俠abel鍙互閫氳繃npminstall--save-dev@babel/core瀹夎锛岀劧鍚庡湪浠ｇ爜涓洿鎺ュ鍏ヤ娇鐢紝浣嗘槸杩欐牱浣跨敤浼氬鍔犵紪璇戠殑宸ヤ綔閲忓湪缁堢鐢ㄦ埛绔紝鏀惧湪浣跨敤涓洿鍚堢悊Babel鍦ㄥ紑鍙戣繃绋嬩腑銆俢onstbabel=require("@babel/core");babel.transformSync("code",optionsObject);鍦ㄥ紑鍙戣繃绋嬩腑娣诲姞Babel鐨勬柟娉曞涓嬶細npminstall--save-dev@babel/core@babel/cli./node_modules/.bin/babelsrc--out-dirlib鍚庯紝鎴戜滑灏卞彲浠ユ坊鍔爌resets浜嗐€傛坊鍔犻缃湁涓ょ鏂瑰紡锛屼竴绉嶆槸涓€娆℃€у畨瑁呮墍鏈夌紪璇戝ソ鐨勬彃浠讹紱鍙︿竴绉嶆槸鍙畨瑁呯壒瀹氱殑鎻掍欢锛屾瘮濡傜澶村姛鑳姐€俷pm瀹夎--save-dev@babel/preset-env./node_modules/.bin/babelsrc--out-dirlib--presets=@babel/envnpminstall--save-dev@babel/plugin-transform-arrow-functions./node_modules/.bin/babelsrc--out-dirlib--plugins=@babel/plugin-transform-arrow-functions濡傛灉鎴戜滑瀹夎涓婇潰鐨勭澶村嚱鏁版彃浠讹紝閭ｄ箞鍦ㄤ唬鐮佷腑锛屽鏋滄垜浠娇鐢ㄧ浉鍏崇澶达紝Babel浼氬湪缂栬瘧杩囩▼涓皢浠ｇ爜杞垚ES5鐗堟湰銆傚湪Babel鍐呴儴锛岃鍙?babelrc閰嶇疆鏂囦欢浠ョ‘瀹氬浣曡浆鎹avaScript浠ｇ爜銆傛墍浠ワ紝浣犲彲浠ユ寜闇€鍒涘缓浣犺缂栬瘧鐨勫嚱鏁版潵鍋氳繖浜涢璁撅紝涔熷彲浠ュ畬鏁翠娇鐢ㄦ墍鏈夋彃浠讹紝瀵规墍鏈夊嚱鏁拌繘琛岀浉鍏崇炕璇戙€備緥濡傦紝鍦ㄤ笅闈㈢殑绀轰緥涓紝绠ご鍑芥暟琚浆鎹负涓嶦S5鐗堟湰鍏煎鐨勪唬鐮併€?/Babel杈撳叆锛欵S6绠ご鍑芥暟[1,2,3].map(n=>n+1);//Babel杈撳嚭锛欵S5鍖垮悕鍑芥暟[1,2,3].map(function(n){returnn+1;});铏界劧鍦ㄥ緢澶氭儏鍐典笅鎴戜滑涓嶉渶瑕佽浆鎹avaScript鐨勬牳蹇冭瑷€锛屼絾鏄疊abel杩樻槸甯哥敤鏉ユ敮鎸丣avaScript璇█鐨勯潪鏍囧噯鎵╁睍锛屽叾涓箣涓€灏辨槸鎴戜滑鍦ㄤ笂涓€璁蹭腑鎻愬埌鐨凢鈥嬧€媗ow銆俷pminstall--save-dev@babel/preset-flownpminstall--save-dev@babel/preset-typescriptJavaScript鎵撳寘JavaScript杩涜妯″潡鍖栧紑鍙?..褰撴椂涓轰簡鎻愬墠浣跨敤杩欎簺鍔熻兘锛屽紑鍙戣€呬細浣跨敤涓€涓猚ode鎵撳寘宸モ€嬧€嬪叿浠庝竴涓猰ain鍏ュ彛寮€濮嬶紝椤虹潃绾跨储閫氳繃import鎸囦护鏍戞壘鍒扮▼搴忔墍渚濊禆鐨勬墍鏈夋ā鍧椼€傜劧鍚庯紝鎵撳寘宸ュ叿浼氬皢鎵€鏈夌嫭绔嬫ā鍧楃殑鏂囦欢缁勫悎鎴愪竴涓狫avaScript浠ｇ爜鏂囦欢锛岀劧鍚庨噸鍐欏鍏ュ鍑烘寚浠わ紝浣夸唬鐮佷互杞瘧褰㈠紡杩愯銆傛崋缁戝悗鐨勭粨鏋滄槸鍙互鍔犺浇鍒颁笉鏀寔妯″潡鍖栫殑娴忚鍣ㄤ腑鐨勫崟涓枃浠躲€傚浠婏紝鍑犱箮鎵€鏈変富娴佹祻瑙堝櫒閮芥敮鎸丒S6妯″潡锛屼絾寮€鍙戜汉鍛樹粛鍦ㄤ娇鐢ㄤ唬鐮佹崋缁戝伐鍏凤紝鑷冲皯鍦ㄧ敓浜х増鏈腑鏄繖鏍枫€傝繖鏍峰仛鐨勫師鍥犳槸涓€娆″姞杞芥牳蹇冨姛鑳斤紝姣斿崟鐙姞杞芥ā鍧楀叿鏈夋洿楂樼殑鎬ц兘鍜屾洿濂界殑鐢ㄦ埛浣撻獙銆俉ebpack銆丷ollup鍜孭arcel銆傝繖浜涙墦鍖呭伐鍏风殑鍩烘湰鍔熻兘鍩烘湰鐩稿悓锛屽尯鍒富瑕佸湪浜庨厤缃拰鏄撶敤鎬с€俉ebpack鍙互鐪嬩綔鏄繖浜涘伐鍏蜂腑鏈€鍙よ€佺殑锛屽苟涓斿彲浠ユ敮鎸佽緝鏃х殑闈炴ā鍧楀寲搴撱€備絾鍚屾椂锛岄厤缃捣鏉ヤ篃姣旇緝鍥伴毦銆傚畠鐨勫绔嬮潰鏄疨arcel锛屼竴绉嶉浂閰嶇疆鐨勬浛浠ｆ柟妗堛€備笌Webpack鐩告瘮锛孯ollup鏇寸畝鍗曪紝閫傚悎灏忛」鐩殑寮€鍙戙€傝礋杞戒紭鍖栦緥濡傦紝璁稿绋嬪簭鏈夊涓叆鍙ｃ€傚叿鏈夎澶氶〉闈㈢殑Web搴旂敤绋嬪簭锛屾瘡涓〉闈㈤兘鏈変笉鍚岀殑鍏ュ彛鐐广€傛墦鍖呭伐鍏烽€氬父鍏佽鎴戜滑鍦ㄦ瘡涓潯鐩垨澶氫釜鏉＄洰鐨勫熀纭€涓婂垱寤轰竴涓寘銆傚墠闈㈠垎浜殑鍓嶇璁捐妯″紡鎻愬埌锛岀▼搴忛櫎浜嗗湪鍒濆鍖栨椂闈欐€佸姞杞借祫婧愬锛岃繕鍙互浣跨敤import鎸夐渶鍔ㄦ€佸姞杞芥ā鍧椼€傝繖鏍峰仛鐨勫ソ澶勬槸鍙互浼樺寲搴旂敤绋嬪簭鐨勫垵濮嬪寲鏃堕棿銆傞€氬父鏀寔瀵煎叆鐨勬墦鍖呭伐鍏峰彲浠ュ垱寤哄涓鍑哄寘锛氫竴涓渶鍒濆姞杞界殑鍖咃紝浠ュ強涓€涓垨澶氫釜鍔ㄦ€佸姞杞界殑鍖呫€傚鍖呴€傜敤浜庡彧鏈夊皯閲忓鍏ヨ皟鐢ㄧ殑绋嬪簭锛屽畠浠姞杞界殑妯″潡浜ら泦涓嶅ぇ銆傚鏋滃姩鎬佸姞杞界殑妯″潡楂樺害鍏变韩渚濊禆鍏崇郴锛屽垯寰堥毦璁＄畻鍑鸿鐢熸垚澶氬皯涓猙undle锛屽苟涓斿彲鑳介渶瑕佹墜鍔ㄩ厤缃産undle鎵嶈兘杩涜鎺掑簭銆俆ree-shaking闈炴爣鍑嗘ā鍧楀寲鎻掍欢鎵撳寘宸ュ叿閫氬父鏈変竴涓敮鎸佹彃浠剁殑妗嗘灦锛屾敮鎸侀潪JavaScript浠ｇ爜妯″潡鐨勫鍏ュ拰鎵撳寘銆傚亣璁句綘鐨勭▼搴忎腑鍖呭惈涓€涓吋瀹笿SON鐨勫ぇ鍨嬫暟鎹粨鏋勶紝鎴戜滑鍙互浣跨敤浠ｇ爜鎵撳寘宸ュ叿灏嗗叾閰嶇疆鎴愪竴涓崟鐙殑JSON鏂囦欢锛岀劧鍚庝互澹版槑鐨勬柟寮忓鍏ュ埌绋嬪簭涓€俰mportwidgetsfrom"./app-widget-list.json"绫讳技锛屾垜浠篃鍙互浣跨敤鎵撳寘宸ュ叿鐨勬彃浠跺姛鑳斤紝鍦↗avaScript涓€氳繃import瀵煎叆CSS鏂囦欢銆備絾鏄繖閲岄渶瑕佹敞鎰忕殑鏄紝瀵煎叆浠讳綍闈濲S鐨勬枃浠堕兘浼氫娇鐢ㄩ潪鏍囧噯鐨勬墿灞曞悕锛屼細浣垮緱鎴戜滑鐨勪唬鐮佸湪涓€瀹氱▼搴︿笂渚濊禆浜庢墦鍖呭伐鍏枫€傛洿鏂颁互JavaScript涔嬬被鐨勮瑷€鍔犺浇锛屽湪鎵ц鍓嶄笉闇€瑕侀缂栬瘧鍜屾墦鍖呫€傝繍琛屾墦鍖呭伐鍏锋劅瑙夊氨鍍忎竴涓缂栬瘧杩囩▼銆傛瘡娆″啓瀹屼唬鐮侊紝閮介渶瑕佹墦鍖呬竴娆★紝鎵嶈兘鍦ㄦ祻瑙堝櫒涓墽琛屻€傚浜庝竴浜涘紑鍙戣€呮潵璇达紝杩欎竴姝ュ彲鑳戒細瑙夊緱寰堥夯鐑︺€備负浜嗚В鍐宠繖涓棶棰橈紝鎵撳寘宸ュ叿閫氬父鏀寔鏂囦欢绯荤粺浠ヨ瀵熻€呮ā寮忔娴嬮」鐩洰褰曚笅鐨勬枃浠跺彉鍖栵紝骞舵牴鎹彉鍖栬嚜鍔ㄩ噸鏂扮敓鎴愰渶瑕佺殑鍖呫€備娇鐢ㄦ鍔熻兘锛屾偍閫氬父鍙互鍦ㄤ繚瀛樼紪杈戝悗鐨勬枃浠跺悗鍙婃椂鍒锋柊锛岃€屾棤闇€鍐嶆鎵嬪姩閲嶆柊鎵撳寘銆備竴浜涙墦鍖呭伐鍏疯繕鏀寔寮€鍙戜汉鍛樼殑鈥滅儹鏇存柊鈥濋€夐」銆傛瘡娆￠噸鏂版墦鍖呭悗锛岄兘浼氳嚜鍔ㄥ姞杞藉埌娴忚鍣ㄤ腑銆傛簮浠ｇ爜鎺掓煡绫讳技浜嶣abel绛夌紪璇戝伐鍏枫€傛墦鍖呭伐鍏烽€氬父杩樹細鐢熸垚婧愪唬鐮佸拰鎵撳寘浠ｇ爜鐨勬槧灏勬枃浠躲€傝繖鏍峰仛鐨勭洰鐨勪篃鏄负浜嗗府鍔╂祻瑙堝櫒寮€鍙戣€呭伐鍏峰湪鎶ラ敊鏃惰嚜鍔ㄥ湪婧愭枃浠朵腑鎵惧埌闂鐨勪綅缃€傛湰鏂囦负2鏈圖ay17鐨勫涔犵瑪璁帮紝鍐呭鏉ヨ嚜鏋佸鏃堕棿銆奐vascript杩涢樁瀹炴垬璇俱€嬶紝涓€璧疯繘姝ヰ煉煉?/p>
