前言
前面的篇章里了從readme文檔中了解了vue3的目標特性磕瓷，收獲了git log規(guī)范盒齿，及熟悉了一款模塊管理工具lerna念逞。本章為大家分享另一項干貨，代碼模版生成器边翁。
內(nèi)容
-
vue3使用的簡單代碼模版工具學習開源的JS框架的時翎承，為了解框架的開發(fā)構建方式，一般會查看package.json .scripts屬性符匾，上面會有對應的npm腳本命令以供開發(fā)調(diào)試审洞。vue3 對應package.json中的命令如下，對應執(zhí)行的內(nèi)容均在./script文件夾下待讳。但是仔細查看會發(fā)現(xiàn)有一個名為 ./bootstrap.js并不在npm配置的命令中芒澜。那么它是用來干嘛的呢，當時我的第一反應是lerna的啟動命令创淡，用來初始化package中對應模塊的依賴的痴晦。然而打開文件內(nèi)容后發(fā)現(xiàn)并非如此，該文件與lerna沒有任何關心琳彩，是一個沒有依賴的簡單的代碼模版生產(chǎn)器誊酌。
image
image
-
bootstarp.js主要的使用步驟為在生成需要對應模塊時執(zhí)行node ./bootstarp.js -- 模塊名稱。該命令會做如下操作露乏，校驗模塊項目是否已經(jīng)生成碧浊。如果未則生成指定模塊名稱的文件夾到packages目錄下，且初始化模塊內(nèi)容生成公共的文件,有此命令可以保證每個模塊有統(tǒng)一的項目架構和標準的初始化方式瘟仿。包括
- /模塊名稱/index.js /模塊名稱/index.ts
- /模塊名稱/dist/模塊名稱.esm-bundler.js
- /模塊名稱/README.md
- /模塊名稱/api-extractor.json
-
/模塊名稱/package.json
image
-
啟示在業(yè)務開發(fā)過程中箱锐，無論是前端項目，還是后臺服務均可以有統(tǒng)一的項目模版生成器平臺劳较，提供靈活配置生成統(tǒng)一的項目框架驹止。以前端為例目前雖然vue，react或者angular均有對應的腳手架工具观蜗。但是都是只提供有基礎的配置臊恋，很多情況下創(chuàng)建完成后仍需要加入大量的其他組件依賴或者，業(yè)務配置墓捻。在公司有一定規(guī)模后抖仅，有必要提供一套公共的項目生成服務或者平臺供業(yè)務組快速搭建項目。 -
實現(xiàn)如果想實現(xiàn)一套平臺式的代碼模版生成器砖第，一種可行的思路是借鑒vue-cli將命令式的方式改造成web模式撤卢，公用的配置屬性抽象成可配置表單，代碼模版使用ejs厂画，jade等等均可凸丸。
總結
在業(yè)務發(fā)展迅速，經(jīng)常新項目【包含前后端】創(chuàng)建的情況下袱院，可以考慮一套標準化的項目創(chuàng)建方式提升創(chuàng)建項目的效率及為后續(xù)維護屎慢，擴展瞭稼，升級提供良好保障。
發(fā)散問題
- 當前是否有面臨新建項目時周期很長的問題腻惠，所開發(fā)的項目類型有沒有很好的項目模版標準劃創(chuàng)建方案环肘，或者公司是否有一套標準化項目創(chuàng)建的平臺
以上問題，平時在工作中有了解或者有最佳實踐的同學也可以不吝分享一起提高
