鎴戜滑閮界煡閬搉pm鏄疛avaScript涓栫晫鐨勫寘绠＄悊宸ュ叿锛屾槸Node.js骞冲彴榛樿鐨勫寘绠＄悊宸ュ叿銆傞€氳繃npm锛屾偍鍙互瀹夎銆佸叡浜€佸垎鍙戜唬鐮佷互鍙婄鐞嗛」鐩緷璧栭」銆傝櫧鐒惰繎骞存潵npm浣滀负鍛戒护琛屽伐鍏峰凡缁忔贰鍑轰汉浠殑瑙嗛噹锛屼絾浣滀负骞挎硾浣跨敤鐨勫瓨鍌ㄥ簱鐨刵pm浠嶅湪钃媰鍙戝睍锛屽苟涓旀槸涓栫晫涓婃渶澶х殑杞欢娉ㄥ唽涓績銆傞€氬父鎴戜滑鍦≧eact銆乂ue銆丄ngular绛夌幇浠ｅ墠绔」鐩腑浣跨敤npminstallxxx鏉ュ畨瑁呬緷璧栵紝浣嗘槸鍓嶇椤圭洰鏈川涓婇兘鏄繍琛屽湪娴忚鍣ㄧ鐨凥TML銆丣avaScript鍜孋SS锛屾墍浠ユ垜浠湁涓€涓湁鍔炴硶鐩存帴鍦ㄦ祻瑙堝櫒鎺у埗鍙板畨瑁卬pm鍖呭苟浣跨敤鍚楋紵濡傛灉浣犲杩欎釜闂鎰熷叴瓒ｏ紝涓嶅Θ璺熺潃鎴戦€氳繃杩欑瘒鏂囩珷涓€鎺㈢┒绔熴€備篃璁镐綘鏈€缁堜細鍙戠幇锛岃秺鏄€滃鏉傗€濈殑涓滆タ锛屽叾鍘熺悊鍗磋秺鏄€滅畝鍗曗€濄€傞€氳繃寮曞叆cdn璧勬簮鍦ㄦ祻瑙堝櫒鎺у埗鍙板畨瑁卬pm鍖呬技涔庢槸澶╂柟澶滆碍锛岃浜鸿寰椾笉鍒囧疄闄呫€傚鏋滄垜鎹竴绉嶆柟寮忔彁鍑洪棶棰橈細濡備綍鍦ㄦ祻瑙堝櫒/HTML涓紩鍏avaScript锛熶篃璁告偍椹笂灏辨湁绛旀浜嗭細鏍囩銆傛病閿欙紝鎴戜滑绗竴姝ュ氨鏄€氳繃鏍囩鍦℉TML椤甸潰寮曞叆cdn璧勬簮銆傞偅涔堬紝濡傛灉鍦ㄦ帶鍒跺彴鐨勯〉闈腑鎻掑叆涓€涓?script/>鏍囩鏉ュ紩鍏DN璧勬簮鍛紵杩欎釜闂涓嶄細楹荤儲浣狅細//InserttagintothepageconstinjectScript=(url)=>{constscript=document.createElement('script');鑴氭湰.src=url;鏂囨。.姝ｆ枃銆俛ppendChild(script);};澶嶅埗浠ｇ爜鎴戜滑瑕佸湪璧勬簮瀵煎叆鍚庡拰鍑洪敊鏃剁粰鐢ㄦ埛涓€浜涙彁绀猴細script.onload=()=>{console.log(pkg_name_origin,'瀹夎鎴愬姛銆?);};script.onerror=()=>{console.log(pkg_name_origin,'瀹夎澶辫触銆?);};澶嶅埗浠ｇ爜杩欐牱锛屾垜浠氨鍙互鐩存帴鍦ㄦ帶鍒跺彴瀵煎叆cdn璧勬簮锛屼篃鍙互娣诲姞涓€浜涢澶栫殑澶勭悊閫昏緫鍋氬杽鍚庡伐浣滐紝姣斿鍘绘帀鏍囩銆傚綋鐒朵綘涔熷彲浠ラ€氳繃鍒涘缓鏍囩鏉ュ紩鍏ss鏍峰紡搴擄紝杩欓噷涓嶅啀璧樿堪銆傛牴鎹寘鍚嶅畨瑁卬pm鍖呬笂闈㈠疄鐜颁簡閫氳繃寮曞叆cdn璧勬簮锛屼絾鏄垜浠竴鑸€氳繃npminstall鍚庤窡鍖呭悕鏉ュ畨瑁卬pm鍖呫€傚緢鏄庢樉锛屾垜浠潬鏄緢闅惧疄鐜扮殑锛岄偅涔堬紝鏈夋病鏈夊姙娉曠洿鎺ユ妸鎴戜滑鐨勫寘鍚嶈浆鎹㈡垚cdn璧勬簮鍦板潃鍛紵绛旀褰撶劧鏄細鏄殑銆備笉鐒舵垜灏卞啓涓眮馃锛宑dnjs鎻愪緵浜嗚繖鏍风殑鑳藉姏銆俢dnjs鎻愪緵浜嗕竴涓畝鍗曠殑API锛屽厑璁镐换浣曚汉蹇€熸煡璇DN涓婄殑璧勬簮銆傚叿浣撲娇鐢紝璇昏€呭彲浠ュ弬鑰冨畼鏂归摼鎺ャ€備笅闈㈡槸涓€涓牴鎹寘鍚嶆煡璇DN璧勬簮閾炬帴鐨勪緥瀛愩€傚彲浠ョ洿鎺ュ湪娴忚鍣ㄥ湴鍧€鏍忔墦寮€杩欎釜閾炬帴鏌ョ湅锛歨ttps://api.cdnjs.com/librari...锛岃繖閲屾槸get璇锋眰锛屼細鐪嬪埌绫讳技涓嬮潰鐨勯〉闈€傛暟缁勭殑绗竴椤规槸鍚嶇О/鍔熻兘鏈€鐩镐技鐨勮祫婧愮殑鏈€鏂癈DN璧勬簮鍦板潃锛氭槸鐨勶紝鏍规嵁鍖呭悕鏌ユ壘CDN璧勬簮URL鐨勫疄鐜板涓嬶細constcdnjs=async(name)=>{constsearchPromise=awaitfetch(`https://api.cdnjs.com/libraries?search=${name}`,//涓嶅湪璇锋眰澶翠腑鏄剧ず鍏充簬referrer鐨勪换浣曚俊鎭瘂referrerPolicy:'no-referrer'});const{results,total}=awaitsearchPromise.json();if(total===0){console.error('Sorry,',name,'娌℃湁鎵惧埌锛岃灏濊瘯鍙︿竴涓叧閿瓧銆?);return;}//鍦ㄧ粨鏋滀腑鑾峰彇鏈€鐩稿叧鐨勪竴涓猚onst{name:exactName,鏈€鏂?url}=results[0];if(name!==exactName){//濡傛灉鍚嶅瓧鏄綘浼犲叆鐨刢onsole.log(name,'notfound,import',exactName,'instead.');}//閫氳繃鏍囩;};澶嶅埗瀹夎鐗瑰畾鐗堟湰npm鍖呯殑浠ｇ爜us鍦╪pm涓紝涔熷彲浠ラ€氳繃绫讳技npminstalljquery@3.5.1鐨勮娉曞畨瑁呯壒瀹氱増鏈殑npm鍖咃紝鑰宑dnjs鍙兘杩斿洖鐗瑰畾鐗堟湰鐨勮缁嗕俊鎭紙涓嶅寘鎷琧dn璧勬簮閾炬帴锛夈€傚湪杩欎竴鐐逛笂锛孶NPKG鍙互甯垜浠竴涓ぇ蹇欍€倁npkg鏄竴涓揩閫熺殑鍏ㄧ悆鍐呭鍒嗗彂缃戠粶锛岄€傜敤浜巒pm涓婄殑鎵€鏈夊唴瀹广€備娇鐢ㄥ畠鍙互浣跨敤浠ヤ笅URL蹇€熻交鏉惧湴浠庝换浣曞寘涓姞杞戒换浣曟枃浠讹細unpkg.com/:package@:version/:file銆傛瘮濡傝闂甴ttps://unpkg.com/jquery@3.5.1浼氳嚜鍔ㄩ噸瀹氬悜鍒癶ttps://unpkg.com/jquery@3.5....骞惰繑鍥瀡3.5.1鐨刯Query鏂囦欢鍐呭锛堝鏋滀笉甯︾増鏈彿锛屼細杩斿洖鏈€鏂扮殑璧勬簮锛夛細涔熷氨鏄鎴戜滑鍙互鐩存帴鎶奾ttps://unpkg.com/鉃曞寘鍚嶄涪鍒?script/>鏍囩涓幓鍔犺浇璧勬簮锛歝onstunpkg=(name)=>{injectScript(https://unpkg.com/${name});};澶嶅埗浠ｇ爜瀹屾暣浠ｇ爜绠€鍗曟暣鐞嗕竴涓嬩笂闈㈢殑浠ｇ爜锛岄€氳繃缁熶竴鐨勫叆鍙ｆ柟娉曡皟鐢╪pmInstall://瀛樺偍鍘熷浼犲叆鐨刵ameletpkg_name_origin=null;constnpmInstall=(originName)=>{//淇壀瀛楃涓瞔onstname=originName.trim();pkg_name_origin=鍚嶇О锛?/涓夌瀵煎叆鏂瑰紡//濡傛灉鏄湁鏁堢殑URL锛岀洿鎺ラ€氳繃鏍囩鎻掑叆if(/^https?:///.test(name))returninjectScript(name);//濡傛灉鎸囧畾浜嗙増鏈紝灏濊瘯浣跨敤unpkg鍔犺浇if(name.indexOf('@')!==-1)returnunpkg(name);//鍚﹀垯锛屽皾璇曚娇鐢╟dnjs鎼滅储returncdnjs(name);};//鍦ㄩ〉闈腑鎻掑叆鏍囩constinjectScript=(url)=>{constscript=document.createElement('script');鑴氭湰.src=url;script.onload=()=>{console.log(pkg_name_origin,'瀹夎鎴愬姛銆?);};script.onerror=()=>{console.log(pkg_name_origin,'瀹夎澶辫触銆?);};document.body.appendChild(鑴氭湰);//document.body.removeChild(script);};constunpkg=(name)=>{injectScript(https://unpkg.com/${name});};constcdnjs=async(name)=>{constsearchPromise=awaitfetch(`https://api.cdnjs.com/libraries?search=${name}`,//涓嶅湪璇锋眰澶翠腑鏄剧ず鍏充簬referrer鐨勪换浣曚俊鎭瘂referrerPolicy:'no-referrer'});const{results,total}=awaitsearchPromise.json();if(total===0){console.error('Sorry,',name,'娌℃湁鎵惧埌锛岃灏濊瘯鍙︿竴涓叧閿瓧銆?);return;}//鍦ㄧ粨鏋滀腑鑾峰彇鏈€鐩稿叧鐨勪竴涓猚onst{name:exactName,鏈€鏂?url}=results[0];if(name!==exactName){console.log(name,'notfound,import',exactName,'instead.');}//閫氳繃鏍囩鎻掑叆injectScript(url);};澶嶅埗浠ｇ爜鎴戜滑鍙互鍦–onsole璋冪敤涓娇鐢ㄧ被浼间簬npmInstall('moment')鐨勬柟娉曪細澶╃劧鏀寔浠ヤ笅璋冪敤鏂瑰紡锛歯pmInstall('jquery');//鐩存帴瀵煎叆npmInstall('jquery@2');//鎸囧畾鐗堟湰npmInstall('https://cdnjs.cloudflare.com/...');//涓嶇敤姣忔閮藉啓杩欎簺鍑芥暟锛屽鍒禼dn鍦板潃琛屼笉琛屽悧鐪嬩簡涓婇潰鐨勬搷浣滐紝鐪熺殑寰堢畝鍗曪紝浣嗕篃璁镐綘浼氳锛氭瘡娆¤鐢紝閮藉緱鍦ㄦ帶鍒跺彴鎵撳紑瀹氫箟鑰屼笖璋冪敤鍑芥暟鏈夌偣楹荤儲锛屼笉姣忔閮藉啓杩欎簺鍑芥暟鍙互鍚楋紵閭ｈ嚜鐒讹紝浣犲彲浠ヨ嚜宸卞啓涓€涓祻瑙堝櫒鎻掍欢锛屽皢杩欎簺JS浠ｇ爜娉ㄥ叆鍒伴〉闈腑銆傝瑙?鍒嗛挓瀛︿細鍐欎竴涓祻瑙堝櫒鎻掍欢鈥斺€旂獊鐮翠笉鐧诲綍SDN灏卞鍒剁殑闄愬埗濡傛灉浣犵湡鐨勪笉鎯冲啓锛屽叾瀹炲凡缁忔湁浜哄府浣犲啓濂戒簡锛岄偅灏辨槸ConsoleImporter锛屽畠鍙互璁╀綘鐨勬祻瑙堝櫒鎺у埗鍙版垚涓轰竴涓洿寮哄ぇ鐨勫疄楠屽満銆備娇鐢ㄧず渚嬶細鏁堟灉鍥撅細閾炬帴锛欳onsoleImporter|Chrome鎻掍欢鑳借В鍐充粈涔堥偅涔堬紝鏈枃浠嬬粛鐨勬柟娉曞拰宸ュ叿鏈変粈涔堢敤鍛紵鍦ㄥ钩鏃剁殑寮€鍙戜腑锛屾垜浠粡甯镐細鎯冲湪椤圭洰涓皾璇曚竴浜涙搷浣滄垨鑰呴獙璇佷竴浜涘簱鏂规硶骞舵墦鍗扮粨鏋溿€傞€氳繃鏈枃鐨勫涔狅紝鍙互鐩存帴鍦╟onsole涓紩鍏oadsh銆乵oment銆乯Query銆丷eact绛夎繘琛屼娇鐢ㄥ拰楠岃瘉锛屽噺灏戦」鐩腑console.log楠岃瘉鍚庡垹闄ょ殑棰戠巼銆傚紩鍏Query锛屽彲浠ユ柟渚跨殑瀵逛竴浜涢」鐩拰椤甸潰杩涜DOM鎿嶄綔锛涘彲浠ラ€氳繃寮曞叆axios鍋氫竴浜涚畝鍗曠殑鎺ュ彛璇锋眰锛涘彲浠ラ€氳繃寮曞叆moment.js楠岃瘉涓€浜涙椂闂存牸寮忓寲鏂规硶鐨勪娇鐢紱浣犲彲浠ュ鍏oadsh璋冪敤瀹冪殑鏂规硶鏉ュ畬鎴愪竴浜涙柟渚跨殑璁＄畻锛?..浣犺兘瀛﹀埌浠€涔堬紝绠€娲佷紭闆呯殑鏂瑰紡鍦ㄦ祦琛岀殑绫诲簱鍜屾鏋舵枃妗ｄ腑缁忓父鍙互鐪嬪埌銆備竴鑸敤娉曟槸unpkg.com/:package@:version/:file銆傛垨鑰呮洿绠€娲佷竴鐐癸細https://unpkg.com/鉃曞寘鍚嶏紝褰撳寘鍚嶅寘鍚増鏈彿鏃讹紝浼氳幏鍙栧搴旂増鏈殑js鏂囦欢锛屼笉鍖呭惈鐗堟湰鍙锋椂锛屼細鑾峰彇鏈€鏂扮殑杩欎釜搴撶殑js鏂囦欢鐨勭増鏈€俢dnjscdnjs鏄竴椤瑰厤璐圭殑寮€婧怌DN鏈嶅姟锛屽彈鍒拌秴杩?2.5%鐨勬墍鏈夌綉绔欑殑淇′换锛屾瘡鏈堝鐞嗚秴杩?000浜夸釜璇锋眰锛岀敱Cloudflare鎻愪緵鏀寔銆傚畠绫讳技浜嶨oogleCDN鍜孧icrosoftCDN鏈嶅姟锛屼絾姣斾袱鑰呴兘蹇€侰DNJS鎻愪緵浜嗗緢澶欽avaScript搴擄紝鎮ㄥ彲浠ュ湪缃戦〉涓婄洿鎺ュ紩鐢ㄨ繖浜汮S鏂囦欢锛屼负鐢ㄦ埛娴忚缃戠珯鎻愪緵鏈€浣崇殑閫熷害浣撻獙銆傛偍杩樺彲浠ラ€氳繃鍏舵煡璇PIhttps://api.cdnjs.com/librari鏉ユ悳绱㈢壒瀹氬簱鐨刢dn鍦板潃...璇PI杩樹細涓烘偍杩斿洖鎮ㄦ煡璇㈢殑搴撶殑涓€浜涙浛浠ｆ柟妗堛€備綔鑰咃細鏉滃畤瀵掓睙闆摼鎺ワ細https://juejin.cn/post/702391...鏉ユ簮锛氱█鍦熸帢閲戠増鏉冨綊浣滆€呮墍鏈夈€傚晢涓氳浆杞借鑱旂郴浣滆€呮巿鏉冿紝闈炲晢涓氳浆杞借娉ㄦ槑鍑哄銆?/p>
