澶у０鏃犲０锛屽ぇ璞℃棤褰紝澶ф櫤鑻ユ剼锛屽ぇ鏅鸿嫢鎷欍€傝秺鏄€滃鏉傗€濈殑涓滆タ锛屽叾鍘熺悊灏辫秺鏄€滅畝鍗曗€濄€傛垜浠兘鐭ラ亾npm鏄疛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.onload=()=>{console.log(pkg_name_origin,'瀹夎鎴愬姛銆?);};script.onerror=()=>{console.log(pkg_name_origin,'瀹夎澶辫触銆?);};杩欐牱鎴戜滑灏卞彲浠ョ洿鎺ュ湪鎺у埗鍙板鍏dn璧勬簮浜嗭紝杩樺彲浠ュ鍔犱竴浜涘杽鍚庡伐浣滅殑澶勭悊閫昏緫锛屾瘮濡傚幓鎺?script/>鏍囩銆傚綋鐒朵綘涔熷彲浠ラ€氳繃鍒涘缓鏍囩鏉ュ紩鍏ss鏍峰紡搴擄紝杩欓噷涓嶅啀璧樿堪銆傛牴鎹寘鍚嶅畨瑁卬pm鍖呬笂闈㈠疄鐜颁簡閫氳繃寮曞叆cdn璧勬簮锛屼絾鏄垜浠竴鑸€氳繃npminstall鍚庤窡鍖呭悕鏉ュ畨瑁卬pm鍖呫€傚緢鏄庢樉锛屾垜浠潬鏄緢闅惧疄鐜扮殑锛岄偅涔堬紝鏈夋病鏈夊姙娉曠洿鎺ユ妸鎴戜滑鐨勫寘鍚嶈浆鎹㈡垚cdn璧勬簮鍦板潃鍛紵绛旀褰撶劧鏄細鏄殑銆備笉鐒舵垜灏卞啓涓眮馃锛宑dnjs鎻愪緵浜嗚繖鏍风殑鑳藉姏銆俢dnjs鎻愪緵浜嗕竴涓畝鍗曠殑API锛屽厑璁镐换浣曚汉蹇€熸煡璇DN涓婄殑璧勬簮銆傚叿浣撲娇鐢紝璇昏€呭彲浠ュ弬鑰冨畼鏂归摼鎺ャ€備笅闈㈡槸涓€涓牴鎹寘鍚嶆煡璇DN璧勬簮閾炬帴鐨勪緥瀛愩€傚彲浠ョ洿鎺ュ湪娴忚鍣ㄥ湴鍧€鏍忔墦寮€杩欎釜閾炬帴鏌ョ湅锛歨ttps://api.cdnjs.com/libraries?search=jquery锛岃繖鏄竴涓猤et璇锋眰锛屼細鐪嬪埌绫讳技涓嬮潰鐨勯〉闈€傛暟缁勪腑鐨勭涓€椤规槸鍚嶇О/鍔熻兘鏈€鎺ヨ繎鐨勮祫婧愮殑鏈€鏂癈DN璧勬簮鍦板潃锛歝onstcdnjs=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('鎶辨瓑锛?锛屽悕绉帮紝'鏈壘鍒帮紝璇峰皾璇曞叾浠栧叧閿瓧銆?);杩斿洖;}//鑾峰彇鏈€鐩稿叧鐨勭粨鏋渃onst{name:exactName,latest:url}=results[0];if(name!==exactName){//濡傛灉鍚嶅瓧鍜屼綘浼犺繘鏉ョ殑涓€鏍疯繘鏉ョ殑涓嶄竴鏍穋onsole.log(name,'notfound,import',exactName,'instead.');}//閫氳繃鏍囩鎻掑叆injectScript(url);};瀹夎鐗瑰畾鐗堟湰鐨刵pm鍖呮垜浠湪npm涓紝涔熷彲浠ラ€氳繃绫讳技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.1/dist/jquery.js骞惰繑鍥瀡3.5.1鐗堟湰鐨刯Query鏂囦欢鍐呭锛堝鏋滀笉甯︾増鏈彿锛屽垯杩斿洖鏈€鏂扮殑璧勬簮锛夛細涔熷氨鏄锛屾垜浠彲浠ョ洿鎺ュ皢https://unpkg.com/鉃曞寘鍚嶄涪鍒?script/>鏍囩涓姞杞借祫婧愶細constunpkg=(鍚嶇О)=>{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}`,//涓嶆樉绀轰换浣時eferrer淇℃伅鍦ㄨ姹傚ご涓瓄referrerPolicy:'no-referrer'});const{results,total}=awaitsearchPromise.json();if(total===0){console.error('鎶辨瓑锛?锛屽悕绉帮紝'鏈壘鍒帮紝璇峰皾璇曞叾浠栧叧閿瓧銆?);杩斿洖;}//鑾峰彇鏈€鐩稿叧鐨勭粨鏋渃onst{name:exactName,latest:url}=results[0];if(name!==exactName){console.log(name,'notfound,import',exactName,'instead.');}//閫氳繃鏍囩鎻掑叆injectScript(url);};鎴戜滑鍙互鍦–onsole璋冪敤涓娇鐢ㄧ被浼糿pmInstall('moment')鐨勬柟寮忥細澶╃劧鏀寔浠ヤ笅璋冪敤鏂瑰紡锛歯pmInstall('jquery');//鐩存帴瀵煎叆npmInstall('jquery@2');//鎸囧畾鐗堟湰npmInstall('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js');//cdn鍦板潃涓嶆槸姣忔閮藉啓杩欎簺鍑芥暟锛屽彲浠ュ悧璇讳竴璇讳笂闈㈢殑鎿嶄綔纭疄寰堢畝鍗曪紝浣嗘槸涔熻浣犱細璇达細姣忔瑕佺敤鐨勬椂鍊欓兘寰楀湪鎺у埗鍙板畾涔夎皟鐢ㄥ嚱鏁帮紝鏈夌偣楹荤儲锛岄毦閬撴瘡娆￠兘鍐欒繖浜涘嚱鏁颁笉琛屽悧锛熷綋鐒朵細璧蜂綔鐢ㄣ€傚彲浠ヨ嚜宸卞啓涓€涓祻瑙堝櫒鎻掍欢锛屾妸杩欎簺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鏂囦欢锛屼负鐢ㄦ埛娴忚缃戠珯鎻愪緵鏈€浣崇殑閫熷害浣撻獙銆備綘涔熷彲浠ラ€氳繃瀹冪殑鏌ヨAPIhttps://api.cdnjs.com/libraries?search=xxx鏉ユ悳绱㈢壒瀹氬簱鐨刢dn鍦板潃銆傛API杩樺皢鍚戞偍杩斿洖鎮ㄦ墍鏌ヨ鐨勫簱鐨勪竴浜涙浛浠ｆ柟妗堛€傚ぇ閬撹嚦绠€锛岀箒鍦ㄥ績鈥熻秺鏄€滃鏉傗€濈殑涓滆タ锛屽叾鍘熺悊鍙兘瓒婃槸鈥滅畝鍗曗€濄€傚弬鑰冩帶鍒跺彴瀵煎叆鍣?/p>
