看vue3源碼能夠學到什麼 : 4、代碼模版生成器

前言

前面的篇章裏了從readme文檔中瞭解了vue3的目標特性，收穫了git log規範，及熟悉了一款模塊管理工具lerna。本章爲你們分享另外一項乾貨，代碼模版生成器。

內容

• vue3使用的簡單代碼模版工具 學習開源的JS框架的時，爲了解框架的開發構建方式，通常會查看package.json .scripts屬性，上面會有對應的npm腳本命令以供開發調試。vue3 對應package.json中的命令以下，對應執行的內容均在./script文件夾下。可是仔細查看會發現有一個名爲 ./bootstrap.js並不在npm配置的命令中。那麼它是用來幹嗎的呢，當時個人第一反應是lerna的啓動命令，用來初始化package中對應模塊的依賴的。然而打開文件內容後發現並不是如此，該文件與lerna沒有任何關係，是一個沒有依賴的簡單的代碼模版生產器。

• bootstarp.js 主要的使用步驟爲在生成須要對應模塊時執行 node ./bootstarp.js -- 模塊名稱。該命令會作以下操做，校驗模塊項目是否已經生成。若是未則生成指定模塊名稱的文件夾到packages目錄下，且初始化模塊內容生成公共的文件,有此命令能夠保證每一個模塊有統一的項目架構和標準的初始化方式。包括

1. /模塊名稱/index.js /模塊名稱/index.ts
2. /模塊名稱/dist/模塊名稱.esm-bundler.js
3. /模塊名稱/README.md
4. /模塊名稱/api-extractor.json
5. /模塊名稱/package.json

   

• 啓示 在業務開發過程當中，不管是前端項目，仍是後臺服務都可以有統一的項目模版生成器平臺，提供靈活配置生成統一的項目框架。之前端爲例目前雖然vue，react或者angular均有對應的腳手架工具。可是都是隻提供有基礎的配置，不少狀況下建立完成後仍須要加入大量的其餘組件依賴或者，業務配置。在公司有必定規模後，有必要提供一套公共的項目生成服務或者平臺供業務組快速搭建項目。
• 實現 若是想實現一套平臺式的代碼模版生成器，一種可行的思路是借鑑vue-cli將命令式的方式改形成web模式，公用的配置屬性抽象成可配置表單，代碼模版使用ejs，jade等等都可。

總結

在業務發展迅速，常常新項目【包含先後端】建立的狀況下，能夠考慮一套標準化的項目建立方式提高建立項目的效率及爲後續維護，擴展，升級提供良好保障。

發散問題

• 當前是否有面臨新建項目時週期很長的問題，所開發的項目類型有沒有很好的項目模版標準劃建立方案，或者公司是否有一套標準化項目建立的平臺

以上問題，平時在工做中有了解或者有最佳實踐的同窗也能夠不吝分享一塊兒提升

若有任何問題或者建議能夠隨時溝通交流反饋，謝謝