前端工程02 建立自己的腳手架工具

前一陣子用egg做了乙個node服務端專案的重構，發現egg相比於koa和express來說，感覺更適合於現階段團隊的node開發，因為現在團隊node的**根本沒有任何規範和約定，亂的一坨，所以引入了node，遵循它的規範，使用它預置的功能，對**的可維護性提公升還是比較大的。

開發完成後，在egg的基礎上增加了一點中介軟體，配置了一些外掛程式和**風格控制的配置，將這個模板抽離出來作為團隊以後開發node服務的基準模板，放在了gitlab上。

原來的時候方法都是直接clone這個專案，再去更改git的相關資訊等等，不是很方便。所以想試著做乙個類似於簡易的vue-cli這樣的工具，能夠直接拉取模板，並且直接生成對應的目錄，配置一些簡單的資訊。

使用cli工具，必定要在控制台輸入、輸出一些相關的資訊，可以使用commander這個包，它可以接受並解析在控制台輸入的引數process.ar**，它基本的使用方法如下：

program.version('0.1.0')
.option('-i, init [name]', '初始化egg專案')
.parse(process.ar**);

通過上面的配置，我們就可以通過program.init拿到使用者在控制台輸入init a時跟在init後面的輸入a，我們將a作為模板的目錄名

然後在開始拉取模板之前，我們需要有乙個loading的提示，會更加友好，可以使用ora這個包，它用來在終端展示loading的圖示。我們這裡使用的也很簡單，開始時展示圖示和提示語：

拉取成功或者失敗後展示對應的圖示和文字：

// 成功
spinner.succeed('拉取成功');
// 失敗
spinner.fail('拉取失敗');

提示的文字我們還希望能帶一些顏色，比如成功我們希望是綠色，失敗時紅色，這樣會更加美觀，我們就可以使用chalk這個包，它可以用來在終端中展示各種顏色：

const chalk = require('chalk');
const success = chalk.bluebright;
const error = chalk.bold.red;
spinner.succeed(success('拉取成功'));
console.error(error('請在init後輸入目錄名'));

準備工作都就緒了，就差最關鍵的一步了，就是拉取模板了。

拉取模板我們也可以借助第三方的包來實現，要使用的就是download-git-repo這個包了，它可以幫助我們模板**從各種倉庫中拉取下來，它既可以通過ssh協議拉取github的**：

github:owner/name

owner/name

也可以直接通過https拉取**：

direct:url

它接受四個引數：

dowanload(url, pathname, opts, callback)

詳細的配置還是參考它的文件吧。整個拉取**的邏輯就基本完成了

if (program.init && typeof program.init === "string") , function (err)  else 
});} else

還有一點優化在changepackage這個函式中完成了，這個函式會將模板中的package.json的name和version，這個功能使用了原生的node來實現

const changepackage = () => /$/package.json`, (err, data) => /$/package.json`, str, function (err) )
});};

這段**基本是copy第一篇參考文章的，自己的node並不靈，把這個段**學習一下。

首先通過fs.readfile來讀取package.json檔案，查詢檔案路徑時使用了process.cwd，它表示當前執行node命令時的資料夾路徑名

node中海油幾個獲取路徑的方法，可以來看一下：

__dirname：獲得當前執行檔案所在目錄的完整目錄名 __filename：獲得當前執行檔案的帶有完整絕對路徑的檔名 process.cwd()：獲得當前執行node命令時候的資料夾目錄名

./：不使用require時候與process.cwd()一樣，使用require時候與__dirname一樣

我們這裡使用的是process.cwd()，就是在執行當前的node命令時的目錄下，因為通過program.init新建的目錄是在執行node命令的目錄下

因為package.json檔案時json格式的，所以可以首先通過data.tostring將二進位制檔案轉換為字串，然後通過json.parse()進行解析。

解析完成後修改相關字段，修改完成後再通過json.stringify轉換為字串，它額外置受了兩個引數，第二個引數用來在序列化過程中替換序列化的內容，第三個引數用來指定縮排空白字串。

序列化完成後，再將內容通過writefile寫會原來的package.json檔案。

使用時為了避免全域性安裝，使用npx來拉取模板是很好的解決防範。具體使用時分為兩種情況，一種是模板在內網的gitlab上，一種是模板在公網的github上。

npm publish

npx egg-cli-zh init [project_name]

但是如果模板在內網的gitlab上，egg-cli-zh也不能發布到npm上，那就使用ssh+git來使用即可：

npx git+ssh: init [project_name]

前端工程02 建立自己的腳手架工具

建立自己的腳手架工具

vuecli腳手架的安裝與腳手架建立專案

yeoman編寫自己的腳手架

前端工程02 建立自己的腳手架工具

建立自己的腳手架工具

vuecli腳手架的安裝與腳手架建立專案

yeoman編寫自己的腳手架

相關推薦