簡易腳手架搭建

寫在最前面

隨着公司業務的發展，獨立的系統也慢慢多了起來，腳手架的必要性也日趨明顯。

基於此，便開始搭起了腳手架，主要解決兩個問題：

• 1.項目的反覆配置
• 2.公共組件的自動更新

代碼地址點這裏，能夠照着代碼再去看這篇文章會以爲更有思路一點

使用

1.全局按裝

npm install zn-cli -g

2.建立實例

zn-cli init [templateType] [projectName]

ps：

templateType: 模板類型（暫時支持Vue和react的標準模板，後期會陸續支持後臺版本，相似於antdPro）

projectName: 你須要建立的項目實例名稱

3.更新腳手架中的公共文件

在你的項目實例中執行：

npm run update

安全性：首先，這個操做是不會覆蓋你的業務代碼，只會去更新根目錄下public文件夾裏的文件

可選性：每一個版本更新的公共文件都會在腳手架的文檔中說明，你能夠選擇你須要的功能對應的版本（後續再講）

代碼

1.分支

master：腳手架代碼，全局安裝的就是這個玩意，用來拉去對應模板生成react/vue實例的，經過npm安裝使用

template分支：分支名template開頭的都是模板分支。我這裏就不一一列舉了，由於分支會陸續的添加，腳手架裏都會說明

test分支：測試分支，用來測試一些功能或者模板用的（可忽略）

2.腳手架實現

核心代碼是在bin目錄裏，index.js爲入口，點開index，能夠看到，主要是對node版本作了判斷，而後底部引入了cli.js,在看這些代碼以前，首先得閒肯定你是對如下幾個node包是瞭解的：

• commander：處理用戶命令行輸入
• download：clone git遠程倉庫代碼

其餘有一些包是輔助類的，好比chalk，ora等，不瞭解也不要緊。

先看代碼：

大體流程：

• 1.獲取用戶輸入
• 2.根據用戶輸入判斷是須要什麼模板，下載對應模板到用戶輸入的項目目錄中
• 3.模板下載完成後，調用_cli下面的_reWritePackageJson方法，去更改實例中package.json中的一些配置
• 4.log裏面的東西是一些提示性信息

基本腳手架就是這個流程，根據用戶輸入去拉去對應的模板代碼到指定的目錄。

可能你注意到在模板下載完成時我執行了一個進程：

spawn('rm', ['-rf', `${name}/build.js`]);

刪除建立的項目中的build.js文件，爲何，由於這個js是用來更新模板，就像上面我說到的執行npm run update的時候就是經過這個js去作處理的。顯然，他應該只存在於腳手架的模板中，而不該該出如今用戶的項目實例中。對於用戶而言，它是無用的。

總結

以上就是一個簡單腳手架的實現方式，後期也會一直去更新和維護這個腳手架，公司如今新的項目就是基於這個腳手架去搭建的，由於公司如今的項目都是react寫的，因此Vue的功能暫時不支持，後期也會慢慢支持vue...