1.鍓嶈█浣滆€呭湪涓ゅ勾鍓嶅啓杩囦竴绡囨枃绔犮€奧ebpack4 鎼缓 Vue 椤圭洰銆嬨€傚悗鏉ラ殢鐫€webpack5鍜寁ue3鐨勫嚭鐜帮紝涓€鐩存兂鍗囩骇鑷繁鐨刢reateVue椤圭洰锛屼絾鏄嫤浜庢椂闂翠笉澶燂紙鍏跺疄鏄洜涓烘噿锛夛紝涓€鐩存嫋鍒扮幇鍦ㄣ€傜粡杩囧嚑澶╃殑榧撴崳锛岀粓浜庢惌寤轰簡鏁翠釜椤圭洰锛屾墍浠ユ湰鏂囧彧璁板綍鍗囩骇鎼缓鐨勮繃绋嬨€侾S锛氬叾瀹炵敤瀹樻柟鑴氭墜鏋朵篃鍙互鎼缓銆備负浠€涔堜綘蹇呴』浠庡ご寮€濮嬶紵濡傛灉鏈夋垜涓嶉渶瑕佺殑鑴氭墜鏋讹紝鎴戜細鎶樿吘銆傚樋鍢匡紝绾睘濞变箰~馃槃2.涓轰粈涔堝噯澶囧伐浣滃崌绾т簡锛熼櫎浜嗘姌鑵撅紝灏辨槸浜彈鏂扮増鏈粰鎴戜滑甯︽潵鐨勬柊鍔熻兘浣撻獙銆俉ebpack5鏂扮壒鎬ф寔涔呭寲缂撳瓨moduleIds&chunkIds浼樺寲SmartertreeshakingModuleFederation...Vue3鏂扮壒鎬ф洿灏忔洿蹇寮篢ypeScript鏀寔鍔犲己API璁捐涓€鑷存€ф彁楂樿嚜缁存姢鎬у紑鏀炬洿澶氬簳灞傚姛鑳界‘瀹氶」鐩妧鏈疭tack缂栫▼璇█锛歍ypeScript4.2銆?鏋勫缓宸ュ叿锛歔Webpack5.33.2]()鍓嶇妗嗘灦锛歏ue3.0.11璺敱宸ュ叿锛歏ueRouter4.0.6鐘舵€佺鐞嗭細Vuex4.0.0CSS棰勭紪璇戯細Sass/LessHTTP宸ュ叿锛欰xiosGitHook宸ュ叿锛欻usky+Lint-staged浠ｇ爜瑙勮寖锛欵ditorConfig+Prettier+ESLint鎻愪氦瑙勮寖锛欳ommitlint鏋勫缓閮ㄧ讲锛歍ravis3銆傞」鐩惌寤烘湰鏂囦笉鏄粠澶存惌寤猴紝鑰屾槸鍦╟reateVue@v1.0.0鐨勫熀纭€涓婁慨鏀规惌寤猴紝濡傛灉涓嶆槑鐧藉彲浠ュ厛鐪嬨€奧ebpack4 鎼缓 Vue 椤圭洰銆嬶紝涓€姝ユ鎼缓锛屽啀鐪嬭繖绡囨枃绔犲崌绾у垱寤篶reateVue鏂囦欢澶癸紝杩涘叆璇ユ枃浠跺す锛宯pminit鎸夎€佽鐭╁垵濮嬪寲椤圭洰锛屽畨瑁厀ebpack鍥涗欢濂梟pmiwebpackwebpack-cliwebpack-dev-serverwebpack-merge--save-devCurrent浣跨敤鐨勭増鏈細鈥渨ebpack鈥濓細鈥淾5.33.2鈥濓紝鈥渨ebpack-bundle-analyzer鈥濓細鈥淾4.4.1鈥濓紝鈥渨ebpack-cli鈥濓細鈥淾4.6.0鈥濓紝鈥渨ebpack-dev-server鈥?"^3.11.2","webpack-merge":"^5.7.3",webpack5鍚姩寮€鍙戞湇鍔″櫒鐨勫懡浠よ窡浠ュ墠鍙樹簡锛屼粠webpack-dev-server杞负webpackserve锛屾墍浠ュ惎鍔╬ackage.json涓殑鑴氭湰淇敼涓猴細"start":"webpackserve--progress--hot--inline--configbuild/webpack.dev.js"鍒涘缓瀵瑰簲鐨勬枃浠跺拰涔嬪墠娌℃湁澶ぇ鍖哄埆銆傛湁涓€浜涘彉鍖栵細1)銆傛寔涔呯紦瀛橈紝娣诲姞缂撳瓨閰嶇疆銆倂5涓粯璁ょ紦瀛樻槸鍐呭瓨锛屼慨鏀硅缃€渇ilesystem鈥濆苟鍐欏叆纭洏//webpack.dev.jsmodule.exports=merge(common,{cache:{type:'filesystem',}//...}2).绉婚櫎鎻掍欢clean-webpack-plugin锛坴5鏀寔锛夈€亀ebpack.HashedModuleIdsPlugin锛坴5鏇村ソ鐨刴oduleIds&chunkIds锛夈€丠ardSourceWebpackPlugin锛坴5鏀寔锛夈€乭appypack锛坴5涓嶅吋瀹癸級瀹夎vue鏍稿績瑙ｆ瀽鎻掍欢瑙ｆ瀽鎻掍欢鏄笉鍚岀殑鏄紝浠巚ue-template-compiler鍒癅vue/compiler-sfc锛寁ue-loader淇濇寔涓嶅彉銆俷pmivue-loader@vue/compiler-sfc--save-dev//鎴戠洰鍓嶄娇鐢ㄧ殑鐗堟湰鏄?vue-loader":"^16.2.0","@vue/compiler-sfc":"^3.0.11",瀹夎vue3鍙婄浉鍏冲簱锛屾坊鍔爒ue绫诲瀷鏂囦欢npmivue@nextvuex@4.0.0-rc.1vue-router--savesrc鏂囦欢澶规坊鍔爏hims-vue.d.ts鏂囦欢瑙ｅ喅vue绫诲瀷閿欒//shims-vue.d.tsdeclaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:DefineComponent<{},{},any>exportdefaultcomponent}瀹夎html妯℃澘瑙ｆ瀽鎻掍欢npmihtml-webpack-plugin--save-dev瀹夎typescript鍜岃В鏋愭彃浠秐pmitypescriptts-loader--save-dev閰嶇疆ts-loader瑙ｆ瀽://webpack.base.js//rules{test:/\.(t|j)s$/,exclude:/node_modules/,use:[{loader:'ts-loader',options:{//鎸囧畾鍏蜂綋鐨則s缂栬瘧閰嶇疆锛屼负浜嗗尯鍒嗚剼鏈殑ts閰嶇疆configFile:path.resolve(__dirname,'../tsconfig.loader.json'),//瀵瑰簲鏂囦欢娣诲姞.ts鎴?tsx鍚庣紑appendTsSuffixTo:[/\.vue$/],},},],}ts-loader瀵瑰崟杩涚▼杩涜绫诲瀷妫€鏌ュ拰姹傚拰缈昏瘧锛屾墍浠ユ晥鐜囨湁鐐规參锛屽彲浠ヤ娇鐢ㄥ杩涚▼瑙ｅ喅鏂规锛氬嵆鍏抽棴绫诲瀷妫€鏌s-loader鐨勭被鍨嬫鏌ョ敱fork-ts-checker-webpack-plugin鎻掍欢鎵ц銆俷pmifork-ts-checker-webpack-plugin--save-dev//webpack.base.js//瑙勫垯{娴嬭瘯锛?\.(t|j)s$/锛屾帓闄わ細/node_modules/锛屼娇鐢細[{loader:'ts-loader',options:{//鎸囧畾鍏蜂綋鐨則s缂栬瘧閰嶇疆锛屼负浜嗗尯鍒嗚剼鏈殑ts閰嶇疆configFile:path.resolve(__dirname,'../tsconfig.loader.json'),//鐩稿簲鐨勭粰鏂囦欢娣诲姞涓€涓?ts鎴?tsx鍚庣紑appendTsSuffixTo:[/\.vue$/],transpileOnly:true,//?鍏抽棴绫诲瀷妫€鏌ワ紝涔熷氨鏄彧缈昏瘧},},],}//pluginspushnewForkTsCheckerWebpackPlugin()杩欓噷椤圭洰鍩烘湰鍙互杩愯锛屾墍浠ユ湁涓€涓枒闂細ts鍙互缂栬瘧鎴愭寚瀹氱増鏈殑js锛宻odo浣犺繕闇€瑕乥abel鍚楋紵tsc鐨則arget鍙槸缈昏瘧璇硶锛屽苟娌℃湁闆嗘垚polyfill锛屾墍浠ヨ繕鏄渶瑕乥abel銆傛瘮濡傛妸绠ご鍑芥暟鍙樻垚鏅€氬嚱鏁帮紝aysnc+await鍙樻垚Promise.then灏辨槸璇硶缈昏瘧锛涗絾鏄鏋滀綘鐨勮繍琛岀幆澧冧腑娌℃湁Promise.prototype.finally锛岄偅浣犺繕鏄病鏈夈€傛墍浠ユ垜浠」鐩腑杩樻槸闇€瑕乥abel.Webpack鏉ョ炕璇慣ypescript鐜版湁鏂规锛氭柟妗?23鍗曡繘绋嬫柟妗堬紙绫诲瀷妫€鏌ュ拰缈昏瘧鍦ㄥ悓涓€涓繘绋嬶級ts-loader锛坱ranspileOnly涓篺alse锛塧wesome-typescript-loader澶氳繘绋媠chemets-loader锛坱ranspileOnly涓簍rue锛?fork-ts-checker-webpack-pluginawesome-typescript-loader+鍐呯疆CheckerPluginbabel+fork-ts-checker-webpack-plugin缁煎悎鑰冭檻鎬ц兘鍜屾墿灞曟€э紝鐩墠鎺ㄨ崘babel+fork-ts-checker-webpack-plugin鏂规銆俠abel7涔嬪墠闇€瑕佸悓鏃朵娇鐢╰s-loader鍜宐abel-loader锛屽叾缂栬瘧杩囩▼涓篢S>TScompiler>JS>Babel>JS銆傚彲浠ョ湅鍒癹s缂栬瘧浜嗕袱娆★紝鏁堢巼鏈変簺浣庛€備絾鏄痓abel7鍑烘潵涔嬪悗锛屽氨鏈変簡瑙ｆ瀽typescript鐨勮兘鍔涖€傛湁浜嗚繖涓骇鍒殑鏀寔锛屾垜浠氨鍙互鍙敤babel浜嗭紝涓嶇敤鍐嶅鍔犱竴杞畉s缂栬瘧杩囩▼銆傚湪babel7涓紝鎴戜滑浣跨敤浜嗘柊鐨凘babel/preset-typescript棰勮锛岀粨鍚堜竴浜涙彃浠讹紝瀹冨彲浠ヨВ鏋愬ぇ閮ㄥ垎鐨則s璇硶銆傞偅涔堬紝Babel鏄浣曞鐞員ypeScript浠ｇ爜鐨勫憿锛烞abel鍓ョ浜嗘墍鏈塗ypeScript锛屽皢鍏惰浆鎹负甯歌JavaScript锛屽苟缁х画浠ヨ嚜宸辩殑鏂瑰紡杩涜銆傚鏋滃垹闄や簡typescript锛屽氨涓嶉渶瑕佺被鍨嬫鏌ヤ簡锛屼笉浼氭湁鐑︿汉鐨勭被鍨嬮敊璇彁绀猴紝鎵€浠ョ紪璇戦€熷害鎻愰珮浜嗭紝鍙互鎰夊揩鐨勭紪绋嬩簡馃槃褰撶劧锛岀被鍨嬪畨鍏ㄦ鏌ユ槸蹇呬笉鍙皯鐨勶紝鎴戜滑鍙互闆嗕腑鍦ㄤ竴涓湴鏂逛竴瀹氭椂闂村鍔爏cript:"check-types":"tsc--watch",addbabeltoparsetypescript#瀹夎浠ヤ笅渚濊禆--save-dev#webpackloaderbabel-loader#babelcore@babel/core#鏅鸿兘杞崲杩涘叆鐩爣杩愯鐜浠ｇ爜@babel/preset-env#瑙ｆ瀽typescript鐨刡abelpreset@babel/preset-typescript#polyfill@babel/plugin-transform-runtime#鏀寔tsclass鐨勭紪鍐橜babel/plugin-proposal-class-properties#鏀寔涓夌偣鎵╁睍@babel/plugin-proposal-object-rest-spread#瀹夎濡備笅渚濊禆--save@babel/runtime@babel/runtime-corejs3"core-js":"^3.11.0",鍒犻櫎ts-loader锛屾坊鍔燽abel-loader{test:/\.(t|j)s$/,exclude:/node_modules/,use:[{loader:'babel-loader',},],}Addbabel閰嶇疆鏂囦欢babel.config.jsmodule鍒伴」鐩牴鐩綍.exports={presets:[['@babel/preset-env',{useBuiltIns:'usage',//importpolyfillcorejsasneeded:3,},],['@babel/preset-typescript',//寮曠敤Typescript鎻掍欢{allExtensions:true,//鏀寔鎵€鏈夋枃浠舵墿灞曞悕锛屽惁鍒欏湪vue鏂囦欢涓娇鐢╰s浼氭姤閿檥,],],鎻掍欢:[['@babel/plugin-transform-runtime',{corejs:3,},],'@babel/proposal-class-properties','@babel/proposal-object-rest-浼犳挱',],}4銆備唬鐮佽鑼冮」鐩腑鐨勪唬鐮佽鑼冮泦鎴愪簡EditorConfig銆丳rettier銆丒SLint銆丠usky銆丩int-staged锛屼互鍙婂浣曡В鍐砅rettier涓嶦SLint鐨勫啿绐併€傚叿浣撳疄鐜板彲浠ュ弬鑰冭繖绡囷紝鍐欑殑寰堣缁嗭紝杩欓噷涓嶅啀璧樿堪5銆佹彁浜よ鑼冧娇鐢╥nquirer閫夋嫨閰嶇疆鐨勬彁浜ょ被鍨嬶紝閰嶅悎commitlint瀹炵幇鎻愪氦妫€鏌?"commitlint-e","commit":"nodecommit/git-commit.js"鍒涘缓commit/git-commit.js鏂囦欢constshell=require('shelljs')constinquirer=require('inquirer')constprompsConfig={ciType:[{type:'list',name:'type',message:'璇烽€夋嫨鎻愪氦绫诲瀷锛?,choices:[{name:'寮曞叆鏂板姛鑳?,value:'feat',},{name:'鏀硅繘浠ｇ爜缁撴瀯/椋庢牸',value:'style',},{name:'淇bug',value:'fix',},{name:'鏀硅繘鎬ц兘',value:'perf',},{name:'鍒犻櫎浠ｇ爜鎴栨枃浠?,value:'鍒犻櫎',},{name:'鍏朵粬淇敼锛屾瘮濡傛敼鍙樻瀯寤鸿繃绋嬶紝鎴栬€呮坊鍔犱緷璧栧簱銆佸伐鍏风瓑',value:'chore',},{name:'Refactor',value:'refactor',},{name:'鍐欑殑鍐欐枃妗?,value:'docs',},{name:'娣诲姞娴嬭瘯',value:'test',},{name:'鏇存柊鍖呮枃浠?,value:'build',},{name:'鍒濆commit',value:'init',},{name:'release/versionlabel',value:'release',},{name:'deployfeature',value:'deploy',},{name:'浠ｇ爜rollback',value:'revert',},{name:'CI鎸佺画闆嗘垚淇敼',value:'ci',},],},],ciMsg:{type:'input',name:'msg',message:'Pleaseenterthecommittext:',validate:function(value){if(value){returntrue}return'蹇呴』杈撳叆鏂囨湰锛?},},}asyncfunctiongitCommit(){let{type}=awaitinquirer.prompt(prompsConfig.ciType)let{msg}=awaitinquirer.prompt(prompsConfig.ciMsg)shell.exec(`gitcommit-m"${type}:${msg}"`,function(){console.log(`\n鎻愪氦鑴氭湰锛歡itcommit-m"${type}:${msg}"`)})}gitCommit()閰嶇疆commitlint绫诲瀷锛屽垱寤篶ommitlint.config.js鏂囦欢锛歮odule.exports={extends:['@commitlint/config-conventional'],rules:{'type-enum':[2,'always',['build','chore','ci','feat','docs','fix','perf','revert','refactor','style','test','init','build','release','delete']],}};瀹屾垚浠ヤ笂鎿嶄綔鍚庯紝git娣诲姞鐩稿叧鏂囦欢锛屾墽琛宯pmruncommit杩涜鎻愪氦楠岃瘉6.鏋勫缓骞堕儴缃睺ravisCITTravisCI鏄竴涓瀯寤哄拰娴嬭瘯鐨勮嚜鍔ㄥ寲宸ュ叿锛屼笉浠呭彲浠ユ彁楂樻晥鐜囷紝杩樺彲浠ヨ寮€鍙戣繃绋嬫洿鍔犲彲闈犲拰涓撲笟锛屼粠鑰屾彁楂樿蒋浠剁殑浠峰€笺€傝€屼笖锛屽畠瀵瑰紑婧愰」鐩槸鍏嶈垂鐨勶紝骞朵笖涓嶈姳涓€鍒嗛挶閲戦挶鍙互甯綘鍋氬緢澶氫簨锛岃缁嗕粙缁嶈鍙傝€冮槷涓€宄扳€斺€斻€婃寔缁泦鎴愭湇鍔?Travis CI 鏁欑▼銆嬮鍏堬紝璁块棶瀹樼綉travis-ci.org锛岀偣鍑诲彸涓婅浣犵殑澶村儚锛屽苟浣跨敤y鐧诲綍鍒癟ravisCI鎴戜滑鐨凣ithub甯愭埛銆傛壘鍒板搴旂殑浠撳簱锛屾墦寮€娣诲姞浠撳簱鐨勫紑鍏筹紝鍦╣ithub涓婄殑setting/Developersettings/Personalaccesstoken鐢熸垚涓€涓猼ravistoken
