鏈€杩戞兂瑙ｅ喅涓€涓満鏅€傚湪鍐檝e-charts鏂囨。鐨勬椂鍊欙紝鎴戞兂鍋氫竴涓唬鐮佺ず渚嬫潵婕旂ず鍔熻兘銆傛洿鏀逛唬鐮佸悗锛屽彲浠ョ洿瑙傜殑鐪嬪埌缁勪欢鐨勫彉鍖栥€?涔嬪墠鐨勭増鏈兘鏄敤docsify鍋氭枃妗ｏ紝docsify鑷甫涓€涓獀uep銆倂uep瑙ｅ喅浜嗘垜闇€瑕佺殑鍦烘櫙銆備笉杩噕uep鐗堟湰姣旇緝鑰併€傚皻涓嶆敮鎸乂ue3缁勪欢銆傛墍浠ユ兂鐙珛寮€鍙戜竴涓繍琛屼唬鐮佺ず渚嬬殑缁勪欢銆侲SModules瑙勮寖ES妯″潡锛圗SM锛夋槸JavaScript瀹樻柟鏍囧噯鍖栨ā鍧楃郴缁熺殑婕斿彉銆傚湪ES6涔嬪墠锛岀ぞ鍖哄凡缁忔湁澶у鐔熸倝鐨勬ā鍧楀姞杞芥柟妗堬紝CommonJS鍜孉MD銆傚墠鑰呯敤浜庢湇鍔＄锛屽嵆Node.js锛屽悗鑰呭垯鍊熷姪绗笁鏂瑰簱瀹炵幇銆傛祻瑙堝櫒鍔犺浇妯″潡銆傚湪鍓嶇宸ョ▼涓紝CommonJS鏈夌潃骞挎硾鐨勫簲鐢ㄨ寖鍥淬€傛垜浠彲浠ヤ粠涓変釜鏂归潰鏉ョ湅锛氭垜浠緷璧栫殑鍜屽彂甯冨湪NPM涓婄殑绗笁鏂规ā鍧楋紝澶ч儴鍒嗛兘鏄粯璁ゅ皝瑁呭苟鏀寔CommonJS鐨勩€俉ebpack鏋勫缓鐨勫墠绔祫婧愬吋瀹筃ode.js銆?js鐜涓嬬殑CommonJS鎴戜滑鍐欑殑ESM浠ｇ爜闇€瑕侀€氳繃Babel杞垚CommonJS銆傚ソ娑堟伅鏄紝娴忚鍣ㄥ凡缁忓紑濮嬪師鐢熸敮鎸佹ā鍧楀姛鑳斤紝Node.js涔熷湪鎸佺画鎺ㄨ繘瀵笶SModules妯″潡鍔熻兘鐨勬敮鎸併€侲SM鏍囧噯鍖栦粛鍦ㄨ繘琛屼腑瀹㈡埛绔拰鏈嶅姟鍣ㄤ箣闂寸殑瀹炵幇宸紓銆傚湪Node.js涓娇鐢‥S妯″潡浠嶯ode.jsv13.2.0寮€濮嬶紝鏈変袱绉嶆柟娉曞彲浠ユ纭В鏋怑SM鏍囧噯妯″潡锛岄渶瑕佸湪涓よ€呬箣闂存坊鍔?-experimental-modules銆傚彲浠ヤ娇鐢‥SM妯″潡銆傚悗缂€涓?mjs鐨勬枃浠朵负鍚庣紑涓?js缁撳熬鐨勬枃浠讹紝鍦╬ackage.json涓０鏄庡瓧娈电被鍨嬩负module//esmA/index.mjsexportdefaultesmA//or//esmB/index.jsexportdefaultesmB//esmB/package.json{"type":"module"}鍚庣紑涓?cjs鐨勬枃浠跺皢缁х画琚В鏋愪负CommonJS妯″潡銆傚湪娴忚鍣ㄤ腑浣跨敤ES妯″潡銆傜幇浠ｆ祻瑙堝櫒宸茬粡鍘熺敓鏀寔鍔犺浇ES妯″潡銆傚湪鍦∟ode.js涓鐞嗕緷璧栧叧绯诲湪鐜颁唬鍓嶇宸ョ▼寮€鍙戠幆澧冧腑锛屼細鏍规嵁package.json鎻忚堪妯″潡涔嬮棿鐨勪緷璧栧叧绯汇€傚畨瑁呮ā鍧楀悗锛屾墍鏈夋ā鍧楅兘灏嗘斁鍦╪ode_modules鏂囦欢澶逛笅銆傛瘮濡俻ackage.json涓殑鎻忚堪渚濊禆lodash:{"name":"test","version":"0.0.1","dependencies":{"lodash":"^4.17.21"}}涓祻瑙堝櫒澶勭悊渚濊禆鍏崇郴绫讳技浜庡湪娴忚鍣ㄤ腑澶勭悊妯″潡涔嬮棿鐨勪緷璧栧叧绯汇€傜洰鍓嶆湁涓€涓柊鎻愭import-maps锛岄€氳繃澹版槑鍦ㄦ祻瑙堝櫒涓鐞嗕緷璧栧叧绯诲拰浣跨敤妯″潡importmap浠嶅浜庢彁妗堥樁娈点€傜洰鍓嶆祻瑙堝櫒鍏煎鎬ц繕姣旇緝鎱紝浣嗘湭鏉ヤ細缁х画鍏煎銆傛垜浠彲浠ヤ娇鐢╡s-module-shims浣挎祻瑙堝櫒鍏煎銆?!--UNPKG-->VueSFC绠€浠嬩粈涔堟槸VueSFC锛熷湪Vue鐢熸€佷腑锛孲FC鏄崟鏂囦欢缁勪欢锛坰ingle-filecomponents锛夌殑缂╁啓銆傚畠浣跨敤鎵╁睍鍚?vue鏉ユ弿杩癡ue缁勪欢鐨勫姛鑳界壒鎬э細馃摑鍏ㄨ娉曢珮浜煋ommonJS妯″潡馃帹缁勪欢鑼冨洿鐨凜SS浠ｇ爜绀轰緥锛氬浣曠紪璇慥ueSFC锛烿ue椤圭洰闇€瑕佷娇鐢╲ue-loader鎴栬€卹ollup-plugin-vue灏哠FC鏂囦欢缂栬瘧鎴愬彲鎵ц鐨凧SVue2vue-loader渚濊禆锛欯vue/component-compiler-utilsvue-style-loaderVue3vue-loader@next渚濊禆锛欯vue/compiler-coreVite2@vitejs/plugin-vue渚濊禆锛欯vue/compiler-sfc@vue/compiler-sfc鐨勫伐浣滃師鐞嗙紪璇戜竴涓猇ueSFC缁勪欢锛岄渶瑕佸垎鍒紪璇戣缁勪欢鐨勬ā鏉裤€佽剼鏈拰鏍峰紡API+-------------------+|||鑴氭湰杞崲|+----->+||+--------------------+|+--------------------+|+-------------------+||||||闂ㄩ潰鍙樻崲+------------>+妯℃澘鍙樻崲||||||+--------------------+|+--------------------+||+--------------------++----->+||椋庢牸杞崲|||+---------------------+facade妯″潡锛屾渶缁堜細琚紪璇戞垚缁勪欢浼唬鐮侊紝缁撴瀯鍜屾覆鏌撴柟娉曞涓?/mainscriptimportscriptfrom'/project/foo.vue?vue&type=script'//templatecompiledtorenderfunctionimport{render}from'/project/foo.vue?vue&type=template&id=xxxxxx'//cssimport'/project/foo.vue?vue&type=style&index=0&id=xxxxxx'//灏嗘覆鏌撳嚱鏁伴檮鍔犲埌scriptscript.render=render//闄勫姞棰濆鐨勫厓鏁版嵁//鍏朵腑涓€浜涘簲璇ユ槸devonlyscript.__file='example.vue'script.__scopeId='xxxxxx'//additionaltooling-specificHMRhandlingcode//using__VUE_HMR_API__globalexportdefaultscriptVite&VueSFCPlayground鍩轰簬@vue/compiler-sfc鏋勫缓鐨勫畼鏂瑰簲鐢ㄦ湁Vite鍜孷ueSFCPlayground锛屽墠鑰呰繍琛屽湪鏈嶅姟绔紝鍚庤€呭湪娴忚鍣ㄧ杩愯vite鐨勪緷璧杤ite2閫氳繃鎻掍欢@vitejs/plugin-vue鎻愪緵Vue3鍗曟枃浠剁粍浠舵敮鎸佸簳灞備緷璧朄vue/compiler-sfcVueSFCPlayground鐨勪緷璧朄vue/compiler-sfc鍏跺疄SFCPlayground鏄熀浜嶡vue/compiler-sfc/dist/compiler-sfc.esm-browser.js缂栬瘧ESModules鍜岀紪璇慡FC鏈変粈涔堝尯鍒紵SFCPlayground妯″潡鐨勭紪璇戞潵鑷簬Vite瀵筍SR鐨勬敮鎸併€俈ite1銆傛鏌ユ墍鏈夊鍏ヨ鍙ュ苟璁板綍id->importNamemap2銆傛鏌ユ墍鏈夊鍑鸿鍙ュ苟瀹氫箟exports3銆傚皢寮曠敤杞崲涓哄鍏ョ粦瀹氬拰import.metareferencesSFCPlayground0銆傚疄渚嬪寲module1銆傛鏌ユ墍鏈夊鍏ヨ鍙ュ苟璁板綍id->importNamemap2銆傛鏌ユ墍鏈夊鍑鸿鍙ュ苟瀹氫箟exports3銆傚皢寮曠敤杞崲涓哄鍏ョ粦瀹?銆俢onvertdynamicimportsappendCSSinjectioncode缂栬瘧HelloWorld.vue缁勪欢鏈変粈涔堝尯鍒紵Vite///components/HelloWorld.vueimport{defineComponent}from"/node_modules/.vite/vue.js?v=49d3ccd8";const_sfc_main=defineComponent({name:"HelloWorld",props:{msg:{type:String,required:true}}});瀵煎叆{toDisplayString涓篲toDisplayString锛宱penBlock涓篲openBlock锛宑reateBlock涓篲createBlock}from"/node_modules/.vite/vue.js?v=49d3ccd8"function_sfc_render(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createBlock("h1",null,_toDisplayString(_ctx.msg),1/*TEXT*/))}_sfc_main.render=_sfc_render_sfc_main.__file="/Users/xiaoyunwei/GitHub/private/slides-vite-demo/src/components/HelloWorld.vue"exportdefault_sfc_mainSFCPlayground//./HelloWorld.vueconst__sfc__={name:"HelloWorld",props:{msg:{type:String,required:true}}}import{toDisplayStringas_toDisplayString,openBlockas_openBlock,createBlockas_createBlock}from"vue"functionrender(_ctx,_cache,$props,$setup,$data,$options){杩斿洖(_openBlock(),_createBlock("h1",null,_toDisplayString($props.msg),1/*TEXT*/))}__sfc__.render=render__sfc__.__file="HelloWorld.vue"exportdefault__sfc__浜屼汉缂栬瘧App.vue缁勪欢鐨勫尯鍒紵Vite//./App.vueimport{defineComponent}from"/node_modules/.vite/vue.js?v=49d3ccd8";importHelloWorldfrom"/src/components/HelloWorld.vue";const_sfc_main=defineComponent({name:"App",components:{HelloWorld}});import{resolveComponentas_resolveComponent,openBlockas_openBlock,createBlockas_createBlock}from"/node_modules/.vite/vue.js?v=49d3ccd8"function_sfc_render(_ctx,_cache,$props,$setup,$data,$options){const_component_HelloWorld=_resolveComponent("HelloWorld")return(_openBlock(),_createBlock(_component_HelloWorld,{msg:"HelloVue3+TypeScript+Vite"}))}_sfc_main.render=_sfc_render_sfc_main.__file="/Users/xiaoyunwei/GitHub/private/slides-vite-demo/src/App.vue"exportdefault_sfc_mainSFCPlayground//./App.vueimportHelloWorldfrom'./HelloWorld.vue'const__sfc__={name:'App',components:{HelloWorld}}import{resolveComponent涓篲resolveComponent锛宱penBlock涓篲openBlock锛宑reateBlock涓篲createBlock}鏉ヨ嚜鈥渧ue鈥濆嚱鏁皉ender(_ctx,_cache,$props,$setup,$data,$options){const_component_HelloWorld=_resolveComponent("HelloWorld")return(_openBlock(),_createBlock(_component_HelloWorld,{msg:"HelloVueSFCPlayground"}))}__sfc__.render=render__sfc__.__file="App.vue"exportdefault__sfc__鍙互鐪嬪嚭锛岀紪璇慡FC鏃讹紝搴曞眰閫昏緫鍩烘湰涓€鑷存娊璞°€傚皢SFC缂栬瘧鎴怑SModules鐨勮兘鍔涘彲浠ュ€熼壌VueSFCPlayground锛屾惌寤轰簡涓や釜杞瓙馃帯vue-sfc2esm锛歨ttps://github.com/xiaoluobod...vue-sfc-sandbox锛歨ttps://github.com/xiaoluobod...鏈夊叴瓒ｇ殑鍙互鐐瑰嚮GitHub璺熼殢vue-sfc2esm灏哣ueSFC缂栬瘧鎴怑S妯″潡銆傚姛鑳金煉熀浜嶵ypeScript馃尦TreeShakable&SideEffectsFree馃搧铏氭嫙鏂囦欢绯荤粺锛堟敮鎸佺紪璇?vue/.js鏂囦欢锛夈€傪煈弸濂界殑閿欒鎻愮ず鏍稿績閫昏緫vue-sfc2esm鍐呴儴瀹炵幇浜嗕竴涓櫄鎷熺殑馃搧鏂囦欢绯荤粺锛岀敤浜庤褰曟枃浠跺拰浠ｇ爜涔嬮棿鐨勫叧绯汇€倂ue-sfc2esm浼氬熀浜嶡vue/compiler-sfc灏哠FC浠ｇ爜缂栬瘧鎴怑SModules銆傜紪璇戝悗鐨凟S妯″潡浠ｇ爜鍙互鐩存帴鍦ㄧ幇浠ｆ祻瑙堝櫒涓娇鐢ㄣ€傜紪璇慉pp.vue绀轰緥浠ｇ爜锛?'}document.getElementById('__sfc-styles').innerHTML=window.__css__constapp=window.__app__=_createApp(__modules__["DefaultDemo.vue"].default)app.config.errorHandler=e=>console.error(e)app.mount('#app')馃挕浣跨敤ESModules妯″潡鍓嶉渶瑕佹彁鍓嶅紩鍏uevue-sfc-sandboxvue-sfc-sandbox鏄痸ue-sfc2esm鐨勪笂灞傚簲鐢紝涔熸槸鍩轰簬@vue/compiler-sfc寮€鍙戠殑锛屾彁渚汼FC娌欑缁勪欢鐨勫疄鏃剁紪杈戦瑙堛€傪煑筹笍SFC娌欑馃挭鍩轰簬TypeScript馃尦TreeShakable&SideEffectsFree馃搧铏氭嫙鏂囦欢绯荤粺锛堟敮鎸佺紪璇?vue/.js鏂囦欢锛夝煈弸濂界殑閿欒鎻愮ず锛屽熀浜巚ue-sfc2esm馃И灏哣ueSFC鏂囦欢杞崲涓篍S妯″潡馃攲鏀寔澶栭儴CDN锛屼緥濡倁npkg銆乯sdelivr绛夈€傪煣㎜oadImportMaps銆傗湉锔忕紪杈戝櫒闈㈡澘馃帹鍩轰簬codemirror6鐨勪唬鐮佺紪杈戝櫒銆傪煣戔€嶐煉诲寮€鍙戜汉鍛樺弸濂斤紝鍐呯疆浠ｇ爜绐佸嚭鏄剧ず锛屼氦浜掑紡闈㈡澘鍛堢幇REPL娌欑鐜銆傪煈撻瑙堥潰鏉库殹锔忓疄鏃剁紪璇慡FC鏂囦欢馃攳鍏ㄥ睆鏌ョ湅鏈潵鍜屽綋鍓嶆儏鍐碘湪鍔熻兘鍦ㄧ嚎瀹炴椂缂栬瘧&棰勮SFC鏂囦欢/Vue3缁勪欢鏀寔瀵煎叆澶栭儴CDN鏀寔瀵煎叆瀵煎叆鍥撅紝瀵煎叆URL闇€瑕佸鍑簍oESM馃挔鏈潵瀵煎嚭SFC缁勪欢鏀寔React缁勪欢缂栬緫鍣ㄥ疄鏃剁紪璇戞櫤鑳芥彁绀吼煉塁ommonJS鎴朥MD鏍煎紡鎵撳寘鐨勫寘涓嶈兘鐩存帴浣跨敤鐨勭棝鐐圭涓夋柟渚濊禆璇锋眰澶锛屾湁鏄庢樉鐨勭瓑寰呮椂闂答煐栨墦鐮存父鎴廋ommonJSToESModules瑙ｅ喅鏂规https://jspm.org/https://jspm.org/https://esm.sh/https://www.jsdelivr.com/esmhttps://www.skypack.dev/Vite2渚濊禆棰勫缓瑙ｅ喅鏂规绫讳技椤圭洰绫讳技浜巗fc-sandbox锛屽熀浜嶸ue鎶€鏈爤鍙互鍦ㄧ嚎鎻愪緵缂栬緫鍣?Demo宸ュ叿vuep-馃帯鐢ㄤ簬娓叉煋Vue缁勪欢鐨勭粍浠讹紝甯︽湁瀹炴椂缂栬緫鍣ㄥ拰棰勮銆俤emosify-鍒涘缓涓€涓猵laygroundto灞曠ず浣犵殑椤圭洰鐨勬紨绀簊.codepan-涓巆odepen鍜宩sbin绫讳技锛屼絾鍙互绂荤嚎宸ヤ綔锛堝凡瀛樻。锛夈€傛湭鏉ュ墠绔伐绋嬪缓璁炬祻瑙堝櫒controller鐜板湪鍙互鍔犺浇浣跨敤ESModules锛屼絾鏄湪涓婇潰鎻愬埌鐨勭棝鐐逛笂杩樺瓨鍦ㄤ竴浜涢棶棰樸€備笉杩囧湪2021骞寸殑浠婂ぉ锛屽張鍑虹幇浜嗕竴鎵瑰牚绉版涓栦唬鐨勫墠绔瀯寤哄伐鍏凤紝姣斿esbuild銆乻nowpack銆乿ite銆亀mr绛夛紝鍙互鐪嬬湅杩欑瘒鏂囩珷銆奀omparing the New Generation of Build Tools銆嬶紝浠庡伐鍏烽厤缃€佸紑鍙戞湇鍔°€佺敓浜ф瀯寤恒€丼SR鏋勫缓绛夋柟闈㈠涓嬩竴浠ｅ墠绔瀯寤哄伐鍏疯繘琛屼簡鍒嗘瀽姣旇緝銆傚弬鑰僇avaScript妯″潡锛歨ttps://developer.mozilla.org...ES妯″潡锛氬崱閫氭繁鍏ョ爺绌讹細https://hacks.mozilla.org/201...import-maps锛歨ttps://github.com/WICG/impor...es-module-shims锛歨ttps://github.com/guybedford...Vue3妯℃澘璧勬簮绠＄悊鍣細https://vue-next-template-exp...VueSFCPlayground锛歨ttps锛?/sfc.vuejs.org/銆奀omparing the New Generation of Build Tools銆?https://css-tricks.com/compar...鍏虫敞鎴戠殑鎶€鏈叕浼楀彿鎵嬫満闃呰锛屼篃鍙互鎵惧埌杩欑瘒鏂囩珷銆傚師鏂囷細https://transpile-vue-sfc-to-...
