鍓嶈█Vite鍦?.0鐗堟湰鎻愪緵浜哃ibraryMode锛屽厑璁稿紑鍙戣€呬娇鐢╒ite鏋勫缓鑷繁鐨勫簱鍙戝竷浣跨敤銆傛濂芥垜鍑嗗鎵撳寘涓€涓猂eact缁勪欢锛屽彂甯冩垚npm鍖咃紝鏂逛究浠ュ悗浣跨敤銆傚悓鏃讹紝涔熶綋楠屽埌浜嗕箣鍓嶄娇鐢╒ite甯︽潵鐨勫揩閫熶綋楠岋紝鎵€浠ユ墠浣跨敤Vite杩涜寮€鍙戙€傚紑鍙戝畬鎴愬悗鍚庡彴鎵撳寘锛屽鍥炬墍绀轰笁涓枃浠讹細style.css鏂囦欢鍖呭惈浜嗙粍浠剁殑鎵€鏈夋牱寮忋€傚鏋滄枃浠跺崟鐙嚭鐜帮紝璇存槑浣跨敤鏃堕渶瑕佸崟鐙鍏ユ牱寮忔枃浠讹紝灏卞儚浣跨敤缁勪欢搴撴椂涓€鏍凤紝闇€瑕佸湪涓绘枃浠朵腑瀵煎叆瀹冪殑鏍峰紡銆備粠'xxx-component'瀵煎叆xxxComponent锛涘鍏?xxx-component/dist/xxx.css'锛?/寮曞叆鏍峰紡浣嗘槸鎴戝皝瑁呯殑鍙槸涓€涓崟鐙殑缁勪欢锛屾牱寮忎笉澶氳€屼笖鍙綔鐢ㄤ簬杩欎釜缁勪欢锛屾病鏈夐偅涔堝鏉傜殑鏍峰紡绯荤粺銆傛墍浠ユ渶濂介厤缃瀯寤哄伐鍏峰湪鎵撳寘鐨勬椂鍊欏皢鏍峰紡娉ㄥ叆鍒癑S鏂囦欢涓紝杩欐牱灏变笉鐢ㄥ啀寮曞叆涓€琛岃鍙ヤ簡銆傛垜浠煡閬揥ebpack鎵撳寘鍙互閰嶇疆涓洪€氳繃鑷墽琛屽嚱鏁板湪DOM涓婂垱寤烘牱寮忔爣绛惧苟鍚戝叾涓敞鍏SS锛屾渶鍚庡彧杈撳嚭JS鏂囦欢锛屼絾鏄疺ite鐨勫畼鏂规枃妗ｄ技涔庡苟娌℃湁鍛婅瘔鎴戜滑濡備綍閰嶇疆銆傛垜浠潵鐪嬬湅瀹樻柟鐨勯厤缃細//vite.config.jsimport{resolve}from'path'import{defineConfig}from'vite'exportdefaultdefineConfig({build:{lib:{entry:resolve(__dirname,'lib/main.js'),name:'MyLib',//灏嗘坊鍔犻€傚綋鐨勬墿灞曞悕fileName:'my-lib'},rollupOptions:{//纭繚灏嗕笉搴旇鎹嗙粦鐨勪緷璧栧閮ㄥ寲//鍒颁綘鐨刲ibraryexternal:['vue'],output:{//ProvideglobalvariablestouseintheUMDbuild//forexternalizeddepsglobals:{vue:'Vue'}}}}})棣栧厛鎵撳紑build.lib閫夐」锛岄厤缃叆鍙ｆ枃浠跺拰鏂囦欢鍚嶇瓑鍩烘湰閰嶇疆锛岀敱浜庡湪Vite鐢熶骇妯″紡涓嬩娇鐢╮ollup杩涜鎵撳寘锛岄渶瑕佸紑鍚浉鍏抽€夐」銆傚綋鎴戜滑鐨勫簱鏄疺ue鎴栬€匯eact鍐欑殑鏃跺€欙紝涓€鑸兘鏄湪杩欎釜鐜涓嬩娇鐢紝姣斿鎴戠殑缁勪欢鏄熀浜嶳eact鍐欑殑锛屾墍浠ュ湪浣跨敤鐨勬椂鍊欏紩鍏eact鏃犵枒锛屼細閫犳垚浜у搧鍐椾綑锛屾墍浠ュ畠闇€瑕佸湪澶栭儴閰嶇疆涓坊鍔犲閮ㄤ緷璧栵紝鍦ㄦ墦鍖呯殑鏃跺€欑粰瀹冦€傛帓闄ゃ€俹utput閫夐」鏄綋杈撳嚭缁撴灉涓簎md鏍煎紡鏃讹紙鍏蜂綋鏍煎紡瑙乥uild.lib.formats閫夐」锛寀md鏄疷niversalModuleDefinition锛屽彲浠ョ洿鎺ョ敤script鏍囩瀵煎叆浣跨敤锛屾墍浠ラ渶瑕佷竴涓叏灞€鍙橀噺鎻愪緵锛夈€備笂闈㈤厤缃ソ鍚庯紝鍐嶆壘鍖呰鏍峰紡鐩稿叧鐨勫唴瀹癸紝娌℃壘鍒般€?.娌″叧绯伙紝鎴戜滑涔熷彲浠ュ幓浠撳簱issues鐪嬬湅锛岃涓嶅畾涔熸湁浜哄彂鐜颁簡杩欎釜闂銆傛悳绱㈢粨鏋滃嚭涔庢剰鏂欙紝鏈€涓嬮潰鐨勮瘎璁虹珶鐒舵湁47鏉★細鐐硅繘鍘诲悗锛屾彁闂€呴棶濡備綍閬垮厤鐢熸垚CSS鏂囦欢锛屼綘鍥炵瓟锛氭牱寮忔敞鍏ョ殑DOM鐜浼氶€犳垚涓庢湇鍔″櫒涓嶅吋瀹圭殑闂-渚ч潰娓叉煋銆傚鏋淐SS浠ｇ爜涓嶅锛屽氨鐢ㄥ唴鑱旀牱寮忔潵瑙ｅ喅銆傝繖涓洖绛旀樉鐒惰寰堝浜轰笉婊℃剰锛堣繖鍙兘鏄棶棰樺叧闂噸寮€鐨勫師鍥狅級锛屽洜涓簊tyledlibrary鍦ㄥ啓鐨勮繃绋嬩腑鍑犱箮浠庢潵娌℃湁鍐欒繃inline锛屾彁闂€呬篃鍥炵瓟璇磋嚜宸变笉浼氱敤itModularizedLess锛岃繕鏄笇鏈涜兘澶氱粰鐐瑰簱妯″紡鐨勯€夋嫨锛岀劧鍚庡湪涓嬮潰鍙戣〃鑷繁鐨勭湅娉曪紝浣嗘槸涓€鐩存病鏈夋彁鍑哄緢濂界殑瑙ｅ喅鏂规銆傛墍浠ワ紝涓轰簡瑙ｅ喅鎴戣嚜宸辩殑闂锛屾垜鍐冲畾鍐欎竴涓彃浠躲€俈itePluginAPIVite鎻掍欢鎻愪緵鐨凙PI鍏跺疄灏辨槸涓€浜沨ooks锛屽垎涓篤ite鐗规湁鐨刪ooks鍜岄€氱敤鐨刪ooks锛圧olluphooks锛岀敱Vite鎻掍欢瀹瑰櫒璋冪敤锛夈€傝繖浜涢挬瀛愮殑鎵ц椤哄簭鏄細Aliasuserpluginwithenforce:'pre'VitecorepluginuserpluginwithoutenforcevalueVitepluginforbuilduserpluginwithenforce:'post'Vitepost-buildplugin(minimized,manifest,report锛塿ite鏍稿績鎻掍欢鍩烘湰閮芥槸鐙湁鐨刪ooks锛屼富瑕佺敤浜庨厤缃垎鏋愶紝鏋勫缓鎻掍欢鍩烘湰閮芥槸Rolluphooks锛屾槸鐪熸璧峰埌鏋勫缓浣滅敤鐨刪ooks锛岀幇鍦ㄨ鏋勫缓閲囬泦濂界殑css鍜宩s浜у搧锛屽悎浜屼负涓€锛屾墍浠ュ啓濂界殑鎻掍欢鐨勬墽琛岄『搴忓簲璇ュ湪鍐呯疆鎻掍欢鎵ц涔嬪悗鎵ц锛屼篃灏辨槸鈥渦serplug-inwithenforce:'post'鈥濋樁娈碉紙杈撳嚭绾э級銆傛墦寮€Rollup瀹樼綉锛屽湪outputhook閮ㄥ垎鏈夎繖鏍蜂竴寮犲浘锛氭牴鎹笂鍥惧彲浠ョ湅鍒皁utput闃舵hook鐨勬墽琛岄『搴忓拰鐗圭偣锛屾垜浠彧闇€瑕佸緱鍒拌緭鍑轰骇鐗╄繘琛屾嫾鎺ュ嵆鍙湪缂栧啓涔嬪墠锛屾墍浠ユ垜浠繀椤讳娇鐢ㄤ笂闈㈢殑generateBundle閽╁瓙銆傚疄鐜板畼鏂规帹鑽愮殑鎻掍欢鏄竴涓繑鍥炲疄闄呮彃浠跺璞＄殑宸ュ巶鍑芥暟锛屽厑璁哥敤鎴蜂紶鍏ラ厤缃€夐」浣滀负鍙傛暟鏉ヨ嚜瀹氫箟鎻掍欢琛屼负銆傚熀鏈粨鏋勫涓嬶細importtype{Plugin}from'vite';functionVitePluginStyleInject():Plugin{return{name:'vite-plugin-style-inject',apply:'build',//搴旂敤妯″紡enforce:'post',//鍔ㄤ綔闃舵generateBundle(_,bundle){}};}Vite榛樿鏍煎紡鍖呮嫭es鍜寀md銆傚鏋滀笉淇敼杩欎釜閰嶇疆锛屼細鐢熸垚涓や釜bundle锛屼細鎵ц涓ゆgenerateBundlehook銆傝鏂规硶鐨勭鍚嶅拰瀹冪殑鍙傛暟绫诲瀷鏄細濮撳悕锛燂細缁嗙怀;鏉ユ簮锛氬瓧绗︿覆|Uint8鏁扮粍锛涚被鍨嬶細鈥滆祫浜р€濓紱}锛涚被鍨婥hunkInfo={浠ｇ爜锛氬瓧绗︿覆锛涘姩鎬佸鍏ワ細瀛楃涓瞇]锛涘鍑猴細瀛楃涓瞇]锛沠acadeModuleId:瀛楃涓瞸鏃犳晥鐨?鏂囦欢鍚嶏細瀛楃涓诧紱闅愬紡鍔犺浇鍓嶏細瀛楃涓瞇]锛涜繘鍙ｏ細瀛楃涓瞇]锛沬mportedBindings:{[imported:string]:string[]};isDynamicEntry锛氬竷灏斿€硷紱isEntry锛氬竷灏斿€硷紱isImplicitEntry锛氬竷灏斿€硷紱鍦板浘锛歋ourceMap|鏃犳晥鐨?妯″潡锛歿[id:string]:{renderedExports:string[];鍒犻櫎瀵煎嚭锛氬瓧绗︿覆[]锛涙覆鏌撻暱搴︼細鏁板瓧锛涘師濮嬮暱搴︼細鏁板瓧锛涗唬鐮侊細瀛楃涓瞸鏃犳晥鐨?};};鍚嶇О锛氬瓧绗︿覆锛涘紩鐢ㄦ枃浠讹細瀛楃涓瞇]锛涚被鍨嬶細鈥滃潡鈥濓紱}锛涙垜浠彧浣跨敤bundle鍙傛暟锛屽畠鏄竴涓璞★紝鍏秌ey鐢辨枃浠跺悕瀛楃涓插€糀ssetInfo鎴朇hunkInfo缁勬垚锛屽叾涓竴涓唴瀹瑰涓嬶細涓婂浘鏄剧ずCSS鏂囦欢鐨勫€煎睘浜嶢ssetInfo锛屾墍浠ユ垜浠渶瑕佹彁鍙栧畠锛歩mporttype{Plugin}from'vite';functionVitePluginStyleInject():Plugin{letstyleCode='';return{name:'vite-plugin-style-inject',apply:'build',//搴旂敤妯″紡enforce:'post',//functionStagegenerateBundle(_,bundle){//+traversebundlefor(constkey鍦╞undle){if(bundle[key]){constchunk=bundle[key];//鑾峰彇鏂囦欢鍚嶅搴旂殑鍊?/鍒ゆ柇+鎻愬彇+绉婚櫎if(chunk.type==='asset'&&chunk.fileName.includes('.css')){styleCode+=chunk.source;鍒犻櫎鍖匸閿甝锛泒}}}};}鐜板湪StyleCode瀛樺偍浜嗘墍鏈夋瀯寤哄悗鐨凜SS浠ｇ爜锛屾墍浠ユ垜浠渶瑕佷竴涓嚜鎵ц鍑芥暟锛屽彲浠ュ垱寤烘牱寮忔爣绛惧苟娣诲姞styleCode锛岀劧鍚庢彃鍏ュ埌ChunkInfo.code涓細importtype{Plugin}鏉ヨ嚜'vite';functionVitePluginStyleInject():Plugin{letstyleCode='';return{name:'vite-plugin-style-inject',apply:'build',//搴旂敤妯″紡enforce:'post',//鍔ㄤ綔闃舵generateBundle(_,bundle){//閬嶅巻bundlefor(constkeyinbundle){if(bundle[key]){constchunk=bundle[key];//鑾峰彇鏂囦欢鍚嶅搴旂殑鍊?/鍒ゆ柇+extract+removeif(chunk.type==='asset'&&chunk.fileName.includes('.css')){styleCode+=chunk.source;鍒犻櫎鍖匸閿甝锛泒}}//+re閬嶅巻bundle锛屼竴娆￠亶鍘嗕笉鑳藉悓鏃跺疄鐜版娊鍙栧拰娉ㄥ叆锛屾瘮濡?style.css'鏄痓undle鐨勬渶鍚庝竴涓猭eyfor(constkeyinbundle){if(bundle[閿甝){constchunk=bundle[閿甝;//鍒ゆ柇鏄惁鏄疛S鏂囦欢鍚嶇殑chunkif(chunk.type==='chunk'&&chunk.fileName.match(/.[cm]?js$/)!==null&&!chunk.fileName.includes('polyfill')){constinitialCode=chunk.code;//淇濆瓨鍘熶唬鐮?/閲嶆柊鍒嗛厤chunk.code='(function(){try{varelementStyle=document.createElement(\'style\');elementStyle.appendChild(document.createTextNode(';chunk.code+=JSON.stringify(styleCode.trim());chunk.code+='));';chunk.code+='document.head.appendChild(elementStyle);}catch(e){console.error(\'vite-plugin-css-injected-by-js\',e);}})();';//鎷兼帴鍘熷浠ｇ爜chunk.code+=initialCode;浼戞伅;//涓€涓猙undle鍙互鎻掑叆涓€娆}}}};}鏈€鍚庯紝鎴戜滑鍦ㄨ繖涓猻tyle鏍囩涓坊鍔犱竴涓猧d灞炴€э紝鏂逛究鐢ㄦ埛鑾峰彇鎿嶄綔锛歩mporttype{Plugin}from'vite';//-functionVitePluginStyleInject():鎻掍欢{functionVitePluginStyleInject(styleId:''):鎻掍欢{letstyleCode='';return{name:'vite-plugin-style-inject',apply:'build',//搴旂敤妯″紡enforce:'post',//鍔ㄤ綔闃舵generateBundle(_,bundle){//閬嶅巻bundlefor(constkeyinbundle){if(bundle[key]){constchunk=bundle[key];//鑾峰彇鏂囦欢name瀵瑰簲鐨勫€?/鍒ゆ柇+鎻愬彇+绉婚櫎if(chunk.type==='asset'&&chunk.fileName.includes('.css'))鍒犻櫎鍖匸閿甝锛泒}}//鍐嶆閬嶅巻bundle锛屼竴娆￠亶鍘嗕笉鑳藉悓鏃跺疄鐜版娊鍙栧拰娉ㄥ叆锛屾瘮濡?style.css'鏄痓undle鐨勬渶鍚庝竴涓猭eyfor(constkeyinbundle){if(bundle[key]){constchunk=bundle[閿甝;//鍒ゆ柇鏄惁鏄痡s鏂囦欢鍚嶇殑chunkif(chunk.type==='chunk'&&chunk.fileName.match(/.[cm]?js$/)!==null&&!chunk.fileName.includes('polyfill')){constinitialCode=chunk.code;//淇濆瓨鍘熷浠ｇ爜//閲嶆柊鍒嗛厤chunk.code='(function(){try{varelementStyle=document.createElement(\'style\');elementStyle.appendChild(document.createTextNode(';chunk.code+=JSON.stringify(styleCode.trim());chunk.code+='));';//+鍒ゆ柇鏄惁娣诲姞idif(styleId.length>0)chunk.code+=`elementStyle.id="${styleId}";`;chunk.code+='document.head.appendChild(elementStyle);}catch(e){console.error(\'vite-plugin-css-injected-by-js\',e);}})();';//鎷兼帴鍘熷浠ｇ爜chunk.code+=initialCode;浼戞伅;//涓€涓猙undle鍙互鎻掑叆涓€娆}}}};}鑷虫锛岃繖涓彃浠跺氨鍐欏ソ浜嗭紝浠ｇ爜浣跨敤璧锋潵涔熸瘮杈冪畝鍗曞湪椤圭洰涓娇鐢ㄨ繖涓彃浠讹細//vite.config.jsimport{defineConfig}from'vite';importVitePluginStyleInjectfrom'vite-plugin-style-inject';exportdefaultdefineConfig({plugins:[VitePluginStyleInject()],})鎵ц鏋勫缓鍛戒护鍚庡彧杈撳嚭涓や釜鏂囦欢锛氬鍏ユ墦鍖呭悗鐨勬枃浠讹紝鍙戠幇鏄彲浠ユ甯歌繍琛岋紝缁堜簬鎼炲畾浜唦缁撹缁撴潫鍚庯紝鍥炲埌issue锛屽帤鐫€鑴哥毊鏀句笂涓婇潰椤圭洰鐨勫湴鍧€馃榿鏈€鍚庢暣鐞嗕竴涓嬶紝鍐欎簡杩欑瘒鏂囩珷銆傝繖鏄垜绗竴娆″彂琛ㄥ敱鐗囥€傛劅璋㈡偍闃呰銆傚鏋滄偍瑙夊緱鏈夊府鍔╋紝璇风偣鍑火煈嶃€?/p>
