鎺ㄨ崘涓€涓浂閰嶇疆寮€绠卞嵆鐢ㄧ殑React/Vue搴旂敤鑷姩鍖栨瀯寤鸿剼鎵嬫灦锛屼笉寮哄ぇ浣犳潵鎵炬垜
Posted 鍓嶇澶у叏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鎺ㄨ崘涓€涓浂閰嶇疆寮€绠卞嵆鐢ㄧ殑React/Vue搴旂敤鑷姩鍖栨瀯寤鸿剼鎵嬫灦锛屼笉寮哄ぇ浣犳潵鎵炬垜相关的知识,希望对你有一定的参考价值。
锛堢粰鍓嶇澶у叏鍔犳槦鏍囷紝鎻愬崌鍓嶇鎶€鑳?/span>锛?/span>
bruce-cli
鏄竴涓?span class="mq-9">銆孯eact/Vue銆?/strong>搴旂敤鑷姩鍖栨瀯寤鸿剼鎵嬫灦锛屽叾闆堕厤缃紑绠卞嵆鐢ㄧ殑浼樼偣闈炲父閫傚悎鍏ラ棬绾с€佸垵涓骇銆佸揩閫熷紑鍙戦」鐩殑鍓嶇鍚屽浣跨敤锛岃繕鍙€氳繃鍒涘缓brucerc.js
鏂囦欢瑕嗙洊鍏堕粯璁ら厤缃紝鍙渶涓撴敞涓氬姟浠g爜鐨勭紪鍐欐棤闇€鍏虫敞鏋勫缓浠g爜鐨勭紪鍐欙紝璁╅」鐩粨鏋勬洿绠€娲併€傝鎯呰鎴宠繖閲岋紝浣跨敤鏃惰寰楁煡鐪嬫枃妗e摕锛屽枩娆㈢殑璇濈粰涓猄tar
馃帴鑳屾櫙
鍦ㄥ墠绔妧鏈殑鏃ョ泭澹ぇ涓嬶紝浠庝互鍓嶇畝鍗曠殑鍑犱釜鏂囦欢鍒扮幇鍦ㄥ鏉傜殑涓€鍫嗘枃浠讹紝鍚勭鎵╁睍鍜屽伐鍏锋鍏ュ埌椤圭洰閲岋紝浣垮緱椤圭洰瓒婃潵瓒婂簽澶ц秺鏉ヨ秺闅剧鐞嗭紝鍓嶇椤圭洰涔熷洜姝よ秼浜?code class="mq-17">宸ョ▼鍖?/code>鍜?code class="mq-18">涓€浣撳寲銆傛棩鏂版湀寮傜殑鍓嶇鎶€鏈凡璁╁墠绔唬鐮佺殑涓氬姟閫昏緫鍜屼氦浜掓晥鏋滆秺鏉ヨ秺澶嶆潅锛岄」鐩細涓€鐩寸淮鎶ゅ拰杩唬锛屼护寮€鍙戣€呮洿鍔犱笉鏄撲簬绠$悊銆傛ā鍧楀寲寮€鍙戝拰鍚勭妗嗘灦鎶婇」鐩垎鎴愯嫢骞蹭釜灏忔ā鍧楋紝澧炲姞浜嗘渶鍚庡彂甯冪殑鍥伴毦锛屾棤涓€涓粺涓€鐨勬爣鍑嗭紝璁╁墠绔」鐩粨鏋勫崈濂囩櫨鎬€傞€氬父鐨勯」鐩兘鏄洟闃熷紑鍙戯紝姣忎釜浜虹殑浠g爜缂栧啓涔犳儻鍜岄€昏緫缂栧啓椋庢牸涔熷緢闅句竴鑷淬€傚伐浣滃洿缁曠潃銆屽紑鍙戞晥鐜囥€?/strong>鍜?span class="mq-20">銆岃繍琛屾€ц兘銆?/strong>鐨勫伐绋嬪寲闂鏄垜浠綔涓哄墠绔紑鍙戣€呭繀椤诲緱澶勭悊鐨勯棶棰樸€傚洜姝ゅ墠绔」鐩嚜鍔ㄥ寲鏋勫缓鍦ㄦ暣涓」鐩紑鍙戜腑瓒婃潵瓒婇噸瑕併€?/p>
鏈」鐩槸涓€涓熀浜?code class="mq-25">Webpack4.x.x寮€鍙戠殑鏋侀€熼浂閰嶇疆寮€绠卞嵆鐢ㄧ殑Web搴旂敤鏋勫缓宸ュ叿(銆屾瘡娆℃洿鏂伴兘浼氫繚鎸佹渶鏂颁緷璧栥€?/strong>)锛岄泦鎴愬悇绉嶅父鐢ㄥ伐鍏? 瀹夎澶辫触 鍛戒护鍔熻兘 鍐呯疆鍔熻兘 榛樿閰嶇疆 瑕嗙洊閰嶇疆 IDE鐩稿叧 CLI鐩稿叧 鏂囦欢鐩稿叧 鍨墖鐩稿叧 ES6鐩稿叧 TS鐩稿叧 鏅€氶」鐩浉鍏? Github涓婂父瑙佺殑鏋勫缓椤圭洰閮芥槸鏆撮湶鍑哄緢澶氭瀯寤轰唬鐮侊紝鏋勫缓浠g爜鍜屼笟鍔′唬鐮佸畬鍏ㄨ€﹀悎鍦ㄤ竴璧凤紝瀵艰嚧缁存姢鍜屽崌绾ф垚鏈姞閲嶏紝閲嶆柊寮€涓€涓」鐩繕鏄細閬囧埌璇ラ棶棰樸€?/p>
鏈」鐩氨鏄惧緱姣旇緝鐗规畩锛岀湡姝e疄鐜版瀯寤轰唬鐮佸拰涓氬姟浠g爜鐨勫畬鍏ㄥ垎绂伙紝浠?code class="mq-778">NPM妯″潡鐨勫舰寮忛攣瀹氭瀯寤轰唬鐮侊紝鍙€氳繃涓€涓厤缃枃浠朵笌涓氬姟浠g爜閫氳锛岃寮€鍙戣€呰В鏀惧弻鎵嬶紝鍙渶鍐欏ソ涓氬姟浠g爜銆?/p>
浠ヤ笅瀵逛紶缁熸瀯寤烘柟妗堝拰鏈瀯寤烘柟妗堣繘琛屼竴娆″悎鐞嗙殑瀵规瘮 浼犵粺鏋勫缓鏂规 鍩轰簬 鏈瀯寤烘柟妗?/p>
鍩轰簬鏈」鐩瀯寤虹殑 鏂规瀵规瘮 浠ヤ笅鏄竴涓畬鏁寸殑椤圭洰寮€鍙戞祦绋嬶細 姝g‘浣跨敤濮垮娍璇风湅杩欎釜瑙嗛锛岀畝鍗曟槗鐢ㄦ柟渚垮揩鎹凤紝銆屼竴娆″畨瑁呭叏灞€杩愯銆?/strong>锛屽疄鍦ㄦ槸銆岃繙绂绘灦鏋勪笓娉ㄧ紪鐮佺殑蹇呭宸ュ叿銆?/strong>銆?/p>
绗旇€呯殑涓汉瀹樼綉浣跨敤 MIT 漏 Joway Young 鏈」鐩敱绗旇€呯嫭鑷紑鍙戯紝鍏ㄧ▼鏃犱换浣曚汉鍙備笌锛岀粡杩?骞村鐨勬椂闂存矇娣€鍑烘潵锛屾暣涓繃绋嬭繘琛屼簡澶ч噺鐨勯」鐩祴璇曞拰搴旂敤锛岀洰鍓嶄笂绾跨殑椤圭洰澶氳揪 鐢变簬鑷繁椤圭洰寮€鍙戠粡楠屽拰鎶€鏈Н绱湁闄愶紝涓嶈兘淇濊瘉鏈」鐩笉瀛樺湪浠讳綍Bug锛岃嫢鍦ㄥ悗缁娇鐢ㄦ湰椤圭洰鏃跺彂鐜癇ug鎴栦骇鐢熺枒闂紝鍙殢鏃跺湪Issues涓婃彁鍑轰綘鐨勫疂璐靛缓璁紝绗旇€呬細绔嬮┈鍙嶉鍜屼慨澶嶇浉鍏矪ug銆?/p>
鏈」鐩簮浜?code class="mq-947">2017骞?鏈?/code>绗旇€呰礋璐d竴涓?code class="mq-948">Angular2椤圭洰閲岀殑鏋勫缓浠g爜锛屼粠鏈€鍒濈殑 鏈€鍒濈瑪鑰呯殑鏋勬€濇槸鍐欎竴浠芥瀯寤轰唬鐮佹ā鏉垮瓨鏀惧湪 寮€鍙戣繖涓」鐩粡鍘嗕簡寰堝锛屾寲鐨勫潙寰堝锛屽~鐨勫潙涔熷緢澶氾紝寰堣嫤寰堢疮锛屾湁娈垫椂闂磋繕缁忓父鐔灏辨槸涓轰簡鎶婂畠鍋氬緱鏇村ソ銆備笉杩囨敹鑾蜂篃寰堝ぇ锛屽涔犱簡寰堝鏂扮煡璇嗘柊鎶€鑳斤紝鎶婂父鐢ㄧ殑Node鐭ヨ瘑閮界敤涓婁簡锛屼篃涓鸿嚜宸卞悗鏈熷仛Node搴旂敤寮€鍙戞墦涓嬩簡宸╁浐鐨勫熀纭€銆傛湁浠樺嚭灏辨湁鏀惰幏锛岀瑪鑰呰繕鏄竴鐩存繁淇¤繖鍙ヨ瘽锛屽洜涓鸿嚜宸辩‘瀹炶繘姝ヤ簡寰堝銆傛埅姝?020骞达紝宸叉垚鍔熻繍鐢ㄥ湪鑷繁鎵€璐熻矗鐨勯」鐩揪鍒?code class="mq-960">50澶氫釜锛屽啀鍔犱笂涓€浜涘悓琛屾湅鍙嬪拰涓€浜涘皬鍏徃涔熸湁浣跨敤鏈」鐩€?/p>
鏈」鐩熀浜?code class="mq-962">Node12+寮€鍙戯紝涓轰簡鍏煎 鑻ヨ寰?code class="mq-966">bruce-cli瀵逛綘鏈夊府鍔╋紝鍙湪Issue涓?code class="mq-967">鎻愬嚭浣犵殑瀹濊吹寤鸿锛岀瑪鑰呬細璁ょ湡闃呰骞舵暣鍚堜綘鐨勫缓璁€傚枩娆?code class="mq-968">bruce-cli鐨勮缁欎竴涓猄tar锛屾垨Fork鏈」鐩埌鑷繁鐨?code class="mq-969">Github涓婏紝鏍规嵁鑷韩闇€姹傚畾鍒跺姛鑳姐€?/p>
1銆?/span> 2銆?/span> 3銆?/span> 瑙夊緱鏈枃瀵逛綘鏈夊府鍔╋紵璇峰垎浜粰鏇村浜?/span> 鎺ㄨ崘鍏虫敞銆屽墠绔ぇ鍏ㄣ€嶏紝鎻愬崌鍓嶇鎶€鑳?/span> 鐐硅禐鍜屽湪鐪嬪氨鏄渶澶х殑鏀寔鉂わ笍 以上是关于鎺ㄨ崘涓€涓浂閰嶇疆寮€绠卞嵆鐢ㄧ殑React/Vue搴旂敤鑷姩鍖栨瀯寤鸿剼鎵嬫灦锛屼笉寮哄ぇ浣犳潵鎵炬垜的主要内容,如果未能解决你的问题,请参考以下文章 闃舵涓€-02.鍒嗙被锛屾帹鑽愶紝鎼滅储锛岃瘎浠凤紝璐墿杞﹀紑鍙?绗?绔?鍟嗗搧鎺ㄨ崘+鎼滅储鍔熻兘瀹炵幇-2-1 鍟嗗搧鎺ㄨ崘 - 闇€姹傚垎鏋愪笌sql鏌ヨ馃敆渚濊禆
Handlebars銆丳ostcss
銆?code class="mq-28">Polyfill銆?code class="mq-29">Sass銆?code class="mq-30">Less銆?code class="mq-31">Babel銆?code class="mq-32">TypeScript銆?code class="mq-33">Stylelint銆?code class="mq-34">Eslint銆?code class="mq-35">Cssnano銆?code class="mq-36">Uglifyjs銆?code class="mq-37">Terser鍜?code class="mq-38">Tinyimg绛?鎵╁睍鏋勫缓鍔熻兘锛岀敤浜庢瀯寤哄拰绠$悊銆孯eact/Vue銆?/strong>鎶€鏈爤鐨勯」鐩簲鐢?/p>
馃摝瀹夎
npm i -g bruce-cli
npm config set registry https://registry.npm.taobao.org/
npm config set disturl https://npm.taobao.org/mirrors/node/
npm i -g bruce-cli
馃捇浣跨敤
~
鍛戒护
缂╁啓
鏋勫缓椤圭洰
銆宐ruce build銆?/strong>
bruce b
鍒濆椤圭洰
銆宐ruce init銆?/strong>
bruce i
鍒囨崲璇█
銆宐ruce locale銆?/strong>
bruce l
鍒涘缓缁勪欢
銆宐ruce new銆?/strong>
bruce n
鍒犻櫎渚濊禆
銆宐ruce remove銆?/strong>
bruce r
鈽庯笍璇█
馃挕鍔熻兘
寮€鍙戠幆澧?/code>銆?
娴嬭瘯鐜
鍜?
鐢熶骇鐜
涓夌妯″紡锛屾瘡绉嶆ā寮忓搴斾笉鍚岀殑鏋勫缓閰嶇疆鍜屼紭鍖栨柟妗?
Hot Module Replacement
锛岄厤鍚?
react-hot-loader
鎴?
vue-loader
澧為噺鏇存柊
css鏂囦欢
鍜?
js鏂囦欢
锛屼慨鍝洿鍝紝鏃犻渶鍒锋柊椤甸潰鍗冲彲瀹炴椂棰勮淇敼缁撴灉锛屽苟淇濆瓨褰撳墠鏁版嵁鐘舵€?
polyfill
锛屾牴鎹祻瑙堝櫒璇锋眰鏃剁殑
UserAgent
杩斿洖鍨墖鏂囦欢锛?
babel
缂栬瘧JS浠g爜鏃跺氨鏃犻渶甯︿笂鍨墖缂栬瘧锛岃捣鍒?
鍑忓寘浣滅敤
polyfill
锛屾牴鎹?
browserslist
鍜岀紪鍐欎唬鐮佷腑鐨凟S6璇硶鑷姩鎻掑叆鎵€闇€鍨墖
import().then()
)锛屽鐞嗕唬鐮佹椂浼氬崟鐙垎绂昏妯″潡锛屾墽琛岄〉闈㈠搴旀搷浣滄椂鎵嶅姞杞借妯″潡锛屼娇鐢ㄦ墠鍔犺浇涓嶄娇鐢ㄥ垯涓嶅姞杞?
浠g爜鎳掑姞杞?/code>)锛屽噺灏戦灞忓姞杞戒唬鐮佸ぇ灏忓拰娓叉煋鏃堕棿
postcss/sass/less
)鍜孞S缂栬瘧鍣?
babel/typescript
)缂栬瘧鏍峰紡鍜岃剼鏈紝寮€鍙戞椂鍙娇鐢ㄦ渶鏂扮壒鎬ф垨鑽夋瑙勮寖鐨勮娉曪紝浣垮緱浠g爜鏇寸畝娲侊紝鎻愰珮浠g爜鐨勫彲璇绘€?
raw-loader
锛岀敤浜庡鐞?
txt鏂囦欢
锛屾妸鏂囦欢鍐呭浠ュ瓧绗︿覆鐨勫舰寮忓鍏?
handlebars-loader
锛岀敤浜庡鐞?
鍐呰仈html
鍜?
hbs鏂囦欢
锛屾妸HTML鍏冪礌浠ュ唴鑱旂殑褰㈠紡鎻掑叆鍒伴〉闈腑
style-loader
鍜?
css-loader
锛岀敤浜庡鐞?
css鏂囦欢
(鍖呭惈
sass/scss/less
杞崲鍚庣殑
css鏂囦欢
)锛屾妸CSS浠嶫S涓崟鐙娊绂诲嚭鏉?
postcss-loader
锛岀敤浜庡鐞咰SS鏈€鏂扮壒鎬у拰鑽夋瑙勮寖锛屾牴鎹?
browserslist
澧炲姞CSS灞炴€у墠缂€
sass-loader
锛岀敤浜庡鐞?
sass鏂囦欢
鍜?
scss鏂囦欢
锛岄€氳繃
dart-sass
灏?
sass/scss
缂栬瘧鎴?
css
less-loader
锛岀敤浜庡鐞?
less鏂囦欢
锛岄€氳繃
less
灏?
sass/less
缂栬瘧鎴?
css
babel-loader
锛屾牴鎹璁剧幆澧冨拰
browserslist
骞剁粨鍚?
polyfill
澶勭悊缂栧啓鐨?
ES6浠g爜
鍜?
TS浠g爜
锛屽苟鐢熸垚澶т紬娴忚鍣ㄥ彲璇嗗埆鐨?
ES5浠g爜
CSS鏍¢獙
锛氬唴缃?
stylelint
锛岄厤缃爣鍑嗙殑CSS璇硶瑙勫垯锛屾鏌ュ拰绾犳鍑虹幇鐨勮娉曢敊璇?
JS鏍¢獙
锛氬唴缃?
eslint
锛岄厤缃爣鍑嗙殑JS鍜孴S璇硶瑙勫垯锛屾鏌ュ拰绾犳鍑虹幇鐨勮娉曢敊璇?
WebpackRuntime浠g爜鍧?/code>銆?
绗笁鏂逛緷璧栦唬鐮佸潡
銆?
鍏叡涓氬姟浠g爜鍧?/code>鍜?
鍗曚釜涓氬姟浠g爜鍧?/code>鍥涘ぇ閮ㄥ垎
鍑忓寘浣滅敤
CSS鍘嬬缉
锛氬唴缃?
cssnano
锛屽帇缂╁幓閲嶆娊绂诲嚭鏉ョ殑CSS
JS鍘嬬缉
锛氬唴缃?
uglifyjs
鍜?
terser
锛屽帇缂╁幓閲嶆娊绂诲嚭鏉ョ殑JS锛?
uglifyjs
鐢ㄤ簬鍘嬬缉
ES5
锛?
terser
鐢ㄤ簬鍘嬬缉
ES6
鍥惧儚鍘嬬缉
锛氬唴缃?
tinyimg
锛屾棤鎹熷帇缂?
jpg
鍜?
png
鍥惧儚
proxy
鍙嶅悜浠g悊鏈嶅姟绔帴鍙o紝瑙e喅鎺ュ彛璺ㄥ煙闂
file-loader
鍜?
url-loader
锛岀敤浜庡鐞嗗瓧浣撱€佸浘鍍忋€侀煶棰戝拰瑙嗛绛夊獟浣撹祫婧愶紝鍥惧儚灏忎簬10k鏃惰浆鎹负
Base-64 URL
Scope Hoisting
锛屽垎鏋愬嚭妯″潡闂寸殑渚濊禆鍏崇郴锛屾妸鏋勫缓濂界殑妯″潡鍚堝苟鍒颁竴涓嚱鏁颁腑锛岃捣鍒?
鍑忓寘浣滅敤
Tree Shaking
锛岀姝?
babel
鎶婁唬鐮佽浆鎹㈡垚
CommonJS瑙勮寖
锛屼娇鐢?
ESM瑙勮寖
鐨勯潤鎬佸0鏄庣壒鐐瑰幓闄や笉琚紩鐢ㄦ垨涓嶈鎵ц鐨勪唬鐮佸潡锛岃捣鍒?
鍑忓寘浣滅敤
brucerc.js
淇敼榛樿閰嶇疆锛屾瀯寤哄惎鍔ㄦ椂灏变細浣跨敤璇ラ厤缃枃浠惰鐩栭粯璁ゆ瀯寤洪厤缃?
鈿欙笍閰嶇疆
err
锛氶敊璇俊鎭?
default
琛ㄧず鏅€氬簲鐢紝
react
琛ㄧずReact搴旂敤锛?
vue
琛ㄧずVue搴旂敤)
node_modules/xxx
)锛岄粯璁や笉瀵?
node_modules
缂栬瘧
scss/less
)
mode
锛氳繍琛岀幆澧?
test
琛ㄧず娴嬭瘯鐜锛?
prod
琛ㄧず鐢熶骇鐜)
dir
锛氳緭鍑鸿矾寰?
host
锛氭湇鍔″櫒IP鍦板潃
password
锛氬瘑鐮?涓嶅彲涓?
privateKey
鍏卞瓨)
path
锛氱洰鏍囨枃浠惰矾寰?
privateKey
锛氱閽?涓嶅彲涓?
password
鍏卞瓨)
username
锛氳处鍙?
mode
锛氳繍琛岀幆澧?
test
琛ㄧず娴嬭瘯鐜锛?
prod
琛ㄧず鐢熶骇鐜)
module.exports = {
alias: {},
browserList: [
"last 20 Chrome versions",
"last 20 Firefox versions",
"last 20 Opera versions",
"Explorer >= 10",
"Safari >= 8",
"android >= 5",
"ios >= 8"
],
errorCb: null,
eslintIgnores: [],
eslintRules: {
// eslint瑙勫垯閰嶇疆
// 鏌ョ湅bruce-cli妯″潡涓嬬殑temp/configs/eslintrc.{default/react/vue}.js
},
frame: "default",
includeModules: [],
openPath: "",
proxy: {},
style: "scss",
stylelintIgnores: [],
stylelintRules: {
// stylelint瑙勫垯閰嶇疆
// 鏌ョ湅bruce-cli妯″潡涓嬬殑temp/configs/stylelintrc.{default/react/vue}.js
},
successCb: null,
uploadOpts: null,
useTs: false
};
.js
褰㈠紡鐨勯厤缃枃浠讹紝鍙弬鑰冧互涓嬮厤缃紪鍐?
CommonJS瑙勮寖
寮€鍙戯紝鎵€浠ュ繀椤讳娇鐢?
module.exports = { ... };
瀵煎嚭浠ヤ笅閰嶇疆
uploadOpts
璁剧疆涓?
null
鎴栧垹闄よ瀛楁锛屽苟浣跨敤
successCb
瀹氫箟涓婁紶鎿嶄綔
module.exports = {
alias: {
swiper: "swiper/dist/js/swiper.js"
},
browserList: [
"> 0.5%",
"last 2 versions"
],
errorCb(err) {
console.log("閿欒淇℃伅", err);
}
eslintIgnores: [
"src/components/*"
],
eslintRules: {
"space-before-function-paren": ["error", "always"]
},
frame: "react",
includeModules: [
"lodash",
"trample"
],
openPath: "?abc=123",
proxy: [{
changeOrigin: true,
context: [
"/login",
"/list",
"/detail"
],
secure: false,
target: "https://www.baidu.com"
}],
style: "less",
stylelintIgnores: [
"src/assets/css/*"
],
stylelintRules: {
"color-hex-case": "upper"
},
successCb(mode, dir) {
console.log("杩愯鐜", mode);
console.log("杈撳嚭璺緞", dir);
},
uploadOpts(mode) {
return {
host: "your server ip",
password: "your server password",
path: "/root/www",
username: "root"
};
},
useTs: true
};馃搵缁嗚妭
VSCode
椹卞姩
Stylelint
鎴?
Eslint
锛岄渶鍦↖DE涓婂畨瑁匰tylelint鎻掍欢鍜孍slint鎻掍欢鎵嶈兘閰嶅悎鏈」鐩牎楠屼唬鐮佸苟楂樹寒鏄剧ず璀﹀憡鍜岄敊璇?
Stylelint
鎴?
Eslint
鐨勮缁嗛厤缃彲鍙傝€冪瑪鑰呯殑寮€婧愰」鐩畍scode-lint
绠€浣撲腑鏂?/code>锛屽闇€鍒囨崲
绻佷綋涓枃/鑻辨枃
璇锋墽琛?
bruce l
鍒囨崲
React
鍜?
Vue
鐨勬瀯寤洪厤缃紝璇峰嬁鏋勫缓
Angular
鎴栧叾浠?
MVVM
椤圭洰
React
搴旂敤鎴?
Vue
搴旂敤鎵嶈兘浣跨敤
bruce n
鍛戒护
brucerc.js
鐨勫睘鎬ф槸
null/""/[]/{}
鏃讹紝浼氫娇鐢ㄥ唴缃厤缃粯璁ゅ€?
bruce r
鍒犻櫎
node_modules
骞堕噸鏂板畨瑁呬緷璧栧嵆鍙?
.js/.jsx/.vue
锛孴S椤圭洰涓嬭剼鏈枃浠跺彧鑳芥槸
.ts/.tsx/.vue
src/index.(js|ts|jsx|tsx)
src/pages/pageName/index.(js|ts|jsx|tsx)
src/pages
鐩綍瀛樺湪涓斿寘鍚瓙鏂囦欢澶癸紝鍒欒嚜鍔ㄨ瘑鍒负
MPA椤圭洰
CSS绮剧伒鍥?/code>鏃讹紝蹇呴』鎶婂浘鏍囩粺涓€鏀惧埌
src/assets/icon
涓嬶紝涓旀枃浠舵牸寮忎负
png
RUN_ENV
鐢ㄤ簬鑾峰彇褰撳墠杩愯鐜锛屽湪浣跨敤
Eslint
浼氭姤璇硶閿欒锛屽湪浠g爜鍚庨潰杩藉姞
// eslint-disable-line
鍗冲彲
dev
锛氬紑鍙戠幆澧?
test
锛氭祴璇曠幆澧?
prod
锛氱敓浜х幆澧?
#
锛氭牴鐩綍
@
锛?
src
鐩綍
@babel/polyfill
鍦?
7.4.0
鍚庤寮冪敤锛屽洜姝ゆ湰椤圭洰浣跨敤鐨勫灚鐗囦负
core-js
鍜?
regenerator-runtime
import "core-js/stable";
鍜?
import "regenerator-runtime/runtime";
锛屾瀯寤虹▼搴忎細鑷鏍规嵁棰勮鐜鍜?
browserslist
澧炲姞鍨墖
core-js
鍜?
regenerator-runtime
锛屽湪鍏ュ彛鏂囦欢鏈€椤跺鎻掑叆
import "core-js/stable";
鍜?
import "regenerator-runtime/runtime";
bruce b
鏋勫缓椤圭洰鏃讹紝鑻ユ槸棣栨鏋勫缓浼氭彁绀烘瀯寤?
package.json
涓?
dependencies
鐨勪緷璧?
Dll鏋勫缓
)锛岀洰鐨勬槸鍔犲揩鍚庣画寮€鍙戜腑
HMR
鐨勬瀯寤洪€熷害锛屽彧鏋勫閲忓缓淇敼杩囩殑鏂囦欢锛屽叾浣欐枃浠朵竴姒傝鍙栫紦瀛?
bruce b
鏋勫缓椤圭洰鏃朵笉瑕侀€夋嫨璇ヤ緷璧栧姞鍏ュ埌
Dll鏋勫缓
涓紝骞跺湪
brucerc.js
鐨?
includeModules
涓婂鍔犺渚濊禆锛屾瀯寤烘椂浼氬幓闄や笉琚紩鐢ㄦ垨涓嶈鎵ц鐨勪唬鐮佸潡
tsconfig.json
tsconfig.json
bruce i
鍒濆椤圭洰鏃堕€夋嫨default
)
handlebars
妯℃澘
src/index.js
鎴?
src/pages/pageName/index.js
src/templates/helpers
鐩綍涓嬶紝鍦ㄦā鏉垮唴浣跨敤
{{> fileName}}
寮曠敤
src/templates/partials
鐩綍涓嬶紝鍦ㄦā鏉垮唴浣跨敤
{{fileName param}}
寮曠敤
鈿栵笍瀵规瘮
Gulp/Webpack
鏋勫缓鐨?code class="mq-789">React/Vue椤圭洰锛岄」鐩唬鐮佸垎涓?span class="mq-790">銆屾瀯寤轰唬鐮併€?/strong>鍜?span class="mq-791">銆屼笟鍔′唬鐮併€?/strong>锛岄」鐩洰褰曞拰鏂囦欢閰嶇疆鏄瘮杈冧紶缁熷拰澶氫汉浣跨敤鐨勯」鐩惌寤烘柟妗堛€傛暣涓」鐩腑闄ゅ幓涓氬姟浠g爜鍚庯紝鏋勫缓浠g爜鐨勬枃浠惰緝澶氾紝閰嶇疆姣旇緝鍒嗘暎锛岃緝闅鹃泦涓鐞嗭紝鏃犳硶鍋氬埌寮€绠卞嵆鐢紝閫氱敤鎬ц緝浣庯紝鍓嶆湡鎼缓椤圭洰鏋勫缓鏂规鍙兘鑺辫垂鐨勬椂闂磋緝澶氾紝椤圭洰鏋勫缓鏃堕渶渚濊禆鏈」鐩瓨鍦ㄧ殑渚濊禆妯″潡鎵嶈兘椹卞姩銆傚浜庡鍒犳敼鏋勫缓鍔熻兘鍜屾柊鍚屼簨鍏ラ棬锛屽彲鑳介渶鑺辫緝澶氱殑鏃堕棿鍘绘煡鎵句唬鐮佸拰鐔熸倝鏋勫缓閫昏緫銆?/p>
React/Vue椤圭洰
锛屼唬鐮佸彧鏈?span class="mq-799">銆屼笟鍔′唬鐮併€?/strong>锛屾瀯寤轰唬鐮侀泦涓湪涓€璧峰仛鎴愪竴涓?code class="mq-800">NPM妯″潡骞跺畨瑁呭埌鍏ㄥ眬鐜涓紝閫氳繃鍛戒护璋冪敤鏈柟妗堥┍鍔ㄩ渶寮€鍙戠殑椤圭洰锛屽疄鐜版瀯寤轰唬鐮佸拰涓氬姟浠g爜瀹屽叏鍒嗙銆傚紑鍙戞椂鏃犻渶鍏虫敞濡備綍鍐欏ソ鏋勫缓浠g爜鍜屼娇鐢ㄤ綍绉嶅伐鍏锋墿灞曟瀯寤哄姛鑳斤紝鍙渶涓撴敞浜庝笟鍔′唬鐮佺殑缂栧啓锛屾暣涓」鐩彧瀛樺湪涓氬姟浠g爜锛屽彲閫氳繃閰嶇疆鏂囦欢淇敼榛樿鏋勫缓閰嶇疆锛屽ぇ澶х缉鍑忛」鐩墠鏈熺殑鍑嗗宸ヤ綔锛屼繚璇侀」鐩殑銆岀畝娲佹€с€?/strong>銆?span class="mq-802">銆岀嫭绔嬫€с€?/strong>銆?span class="mq-803">銆岄珮鏁堟€с€?/strong>鍜?span class="mq-804">銆岀淮鎶ゆ€с€?/strong>銆傜渷鍘婚」鐩墠鏈熸惌寤虹殑鏃堕棿锛岀洿鎺ュ紑绠卞嵆鐢紝浣垮紑鍙戣€呴泦涓簿鍔涘啓濂戒笟鍔′唬鐮併€?/p>
~
浼犵粺鏋勫缓鏂规
鏈瀯寤烘柟妗?/th>
鏋勫缓鏂囦欢
build鏂囦欢澶?/code>銆?code class="mq-820">config鏂囦欢澶?/code>
.browserslistrc
.postcssrc
銆?code class="mq-825">babelrc.stylelintignore
銆?code class="mq-828">.stylelintrc.eslintignore
銆?code class="mq-831">.eslintrc鏃?/td>
涓氬姟鏂囦欢
src鏂囦欢澶?/code>
src鏂囦欢澶?/code>
閰嶇疆鏂囦欢
寰堝锛岄渶鍒嗗紑涔﹀啓
brucerc.js
鍩虹鏂囦欢
package.json
銆?code class="mq-848">readme.mdpackage.json
銆?code class="mq-851">readme.md
渚濊禆妯″潡
Webpack/Gulp鎶€鏈爤(
鏋勫缓
)
React/Vue鎶€鏈爤(涓氬姟
)React/Vue鎶€鏈爤(
涓氬姟
)
瀹夎鏃堕棿
杈冩參
瀹夎鏋勫缓鍜屼笟鍔′唬鐮佺殑渚濊禆妯″潡
姣忔寮€鍙戦兘闇€瀹夎涓€娆?/td>
杈冨揩
鍙畨瑁呬笟鍔′唬鐮佺殑渚濊禆妯″潡
鍏ㄥ眬瀹夎涓€娆″嵆鍙?/td>
寮€鍙戝噯澶?/td>
缂栧啓Webpack/Gulp鍜屽绉嶅伐鍏锋惌閰嶇殑鏋勫缓浠g爜
寮€绠卞嵆鐢?/td>
鍏ㄥ眬浣跨敤
涓嶅彲琛?/td>
鍙
鏋勫缓澶嶇敤
鏂板缓鏂囦欢澶癸紝澶嶅埗绮樿创鏋勫缓浠g爜锛屼慨鏀归厤缃枃浠剁瓑
鎵ц鍛戒护琛屽垵濮嬮」鐩拰鏋勫缓椤圭洰
鏂版墜鏋勫缓
闇€浜嗚В鏋勫缓浠g爜閫昏緫鍜岄厤缃枃浠?/td>
鎵ц鍛戒护琛?/td>
鍚庢湡鎵╁睍
鍦ㄥ師鏈夋瀯寤轰唬鐮佷腑澧炲垹鏀规瀯寤哄姛鑳?/td>
閫氳繃閰嶇疆鏂囦欢 brucerc.js
澧炲垹鏀规瀯寤哄姛鑳?/td>
閰嶇疆绠$悊
鍒嗘暎鍒颁笉鍚岀殑鏋勫缓閰嶇疆鏂囦欢涓?br class="mq-892">闇€瀵逛笉鍚屽伐鍏风殑閰嶇疆鏂囦欢淇敼
闆嗘垚鏋勫缓鐨勫熀纭€閰嶇疆
鍙€氳繃閰嶇疆鏂囦欢brucerc.js
瑕嗙洊馃敤绀轰緥
bruce -h
bruce -v
bruce l
cd projectList
bruce i
cd myProject
bruce b
cmd
绐楀彛鎵ц)锛?
bruce n
cmd
绐楀彛鎵ц)锛?
bruce b
bruce r
bruce-cli
鏋勫缓锛屽彲褰撳仛bruce-cli
绀轰緥锛屾湁鍏磋叮鐨勫悓瀛﹁鎴矹owayYoung涓汉瀹樼綉鏌ョ湅璇︽儏銆?/p>
馃敄鐗堟潈
50
澶氫釜锛岃冻鍙敮鎾戞湰椤圭洰鐨勫彲琛屾€у拰绋冲畾鎬с€?/p>
鈴冲悗璁?/span>
Webpack2
涓€鐩磋凯浠e埌浠婂ぉ鐨?code class="mq-950">Webpack4锛岃瘽璇?code class="mq-951">Webpack5杩囨鏃堕棿灏辫鍙戝竷浜嗐€?/p>
Github
涓婏紝鐒跺悗閫氳繃鑴氭湰鎶婃瀯寤轰唬鐮佹媺涓嬫潵銆傚彲鏄繖鏍锋瀯寤轰唬鐮佸拰涓氬姟浠g爜杩樻槸鍚屾椂瀛樻斁鍦ㄤ竴涓枃浠跺す閲岋紝涓嶆槗绠$悊锛屾枃浠跺張澶氬張鏉傘€備笅娆℃柊寮€椤圭洰鏃跺張瑕佹妸鏋勫缓浠g爜澶嶅埗杩囧幓锛屾湁鏃跺崌绾ф瀯寤哄姛鑳斤紝涓轰簡淇濇寔鏋勫缓鍔熻兘鐨勭粺涓€锛岄渶鍚屾椂淇敼鍑犱釜椤圭洰閲岀殑鏋勫缓浠g爜銆傛棦鐒惰繖鏍凤紝涓轰綍涓嶆妸閭d簺閫氱敤鐨勬瀯寤轰唬鐮佹娊绂诲嚭鏉ュ仛鎴愪竴涓狽PM妯″潡鍛紝杩欐牱銆屼竴娆″畨瑁呭叏灞€銆?/strong>杩愯锛屽鐖藉憖锛?/p>
2017骞?鏈?/code>绗旇€呭氨寮€濮嬪杩欎釜椤圭洰鍗囩骇鏀归€狅紝鍋氭垚涓€涓狽PM妯″潡锛屽彧涓嶈繃涓€鐩村湪鑷繁璐熻矗鐨勯」鐩笂搴旂敤銆傚洜涓鸿繕娌℃€庢牱搴旂敤鍒板叾浠栫殑椤圭洰涓婏紝鎵€浠ヤ篃涓嶆暍寮€婧愩€傜粡杩囧樊涓嶅1骞村ぇ澶у皬灏?0澶氫釜椤圭洰鐨勫簲鐢紝缁堜簬绋冲畾浜嗚繖涓」鐩殑鍔熻兘锛屾墍浠ョ瑪鑰呬篃鍐冲畾瀵?code class="mq-957">bruce-cli
寮€婧愩€傚浜庢墍鏈夐€氳繃bruce-cli
鍒涘缓鐨勯」鐩兘鍙紑绠卞嵆鐢ㄦ墍鏈夌殑鏋勫缓鍔熻兘锛屽鏃犵壒娈婇渶姹傜敋鑷虫槸闆堕厤缃嵆鍙繍琛岄」鐩€?/p>
Node10+
锛屾墍浠ヤ娇鐢?code class="mq-964">babel缂栬瘧浜嗘簮鐮侊紝鐢熸垚鐜板湪绾夸笂鐗堟湰鐨勪唬鐮侊紝寰呮洿澶氱殑椤圭洰娴嬭瘯瀹屾垚鍜屽簲鐢ㄨ捣鏉ュ悗浼氬紑鏀炬簮鐮佷緵澶у涓€璧峰涔犲拰瀹屽杽銆?/p>