簡易腳手架搭建

cyixlq 發布于2019-08-23 15:53 / 3489人閱讀

摘要：總結以上就是一個簡單腳手架的實現方式，后期也會一直去更新和維護這個腳手架，公司現在新的項目就是基于這個腳手架去搭建的，因為公司現在的項目都是寫的，所以的功能暫時不支持，后期也會慢慢支持

寫在最前面

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

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

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...

GPU云服務器云服務器腳手架腳手架使用項目腳手架 js腳手架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102518.html

隨我來基于webpack構建一個簡易的vue腳手架 (webpack系列二)

摘要：構建文件清理構建目錄下的文件打包工具編譯文件模板函數編譯與配合使用入口處理項目中的不同類型的模塊。前言之前有寫了一篇webpack的文章(認識篇) 猛戳,大家對于webpack基本概念(entry,output,loader,plugin,mode...)應該是有了較模糊的認識.今天希望在通過(對于vue-cli的效仿)搭建一個自己的腳手架的途中對于概念會有更深刻的認識. 目錄 1...

tomorrowwu 2019-08-23 13:05 評論0 收藏0
Vuejs自己的構建工具

摘要：然而，這些模板并不限制你自己對于使用的架構組織和選擇類庫。目前可用的模板包括全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。最近，尤大在和人對噴的時候，悄然放出了一個大招，于是為了追趕他的步伐，趕緊試驗了下，并且把原文給大家翻譯下。原文地址：Announcing vue-cli 譯文源地址： Vuejs自己的構建工具先上原文翻譯：最近有很多大量關于Reac...

leoperfect 2019-08-19 17:20 評論0 收藏0
vue2全家桶+koa2+mongodb搭建一個簡單偽全棧博客

摘要：本來不想推的，看到上有個項目很簡單，都有，推推看咯。雖然這個項目很簡單，但是還蠻有趣，用來入門和以及再好不過了。本來不想推的，看到github上有個項目很簡單，都有300 star，推推看咯。雖然這個項目很簡單，但是還蠻有趣，用來入門vue2和nodejs以及mongodb再好不過了。等這幾天把公司手頭的事情忙完，再把vuex的部分強化下。基于vue2/vuex/vue-rout...

bitkylin 2019-08-21 17:19 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0