怎么實(shí)現(xiàn)自己的腳手架工具

這篇文章將為大家詳細(xì)講解有關(guān)怎么實(shí)現(xiàn)自己的腳手架工具，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

腳手架工具

什么是腳手架工具?工程化中，最重要的就是腳手架工具了，什么是腳手架工具呢?生活中其實(shí)很常見：

比如寫一個(gè)網(wǎng)站，最開始都是從零開始的，后面再寫一個(gè)相同類型的網(wǎng)站時(shí)，就可以將之前的代碼直接復(fù)制過來了。如果將可以復(fù)制的這些內(nèi)容抽離出來，每次開發(fā)新東西，都能自動(dòng)生成就好了。

再舉個(gè)例子，之前我們家包餃子，都是自己搟皮，后來發(fā)現(xiàn)樓下超市有買餃子皮的，餃子皮就是個(gè)半成品，腳手架工具就是做這些半成品的。

我們的項(xiàng)目中，會(huì)有各種文件夾及文件，腳手架就可以一鍵生成：

腳手架的作用：創(chuàng)建項(xiàng)目基礎(chǔ)結(jié)構(gòu)、提供項(xiàng)目規(guī)范和約定。

前端的腳手架工具，分為兩類，通用型和專用型。

通用型腳手架工具 Yeoman

Yeoman 的基本概念：The web's scaffolding tool for modern webapps，即用于現(xiàn)代化 web  應(yīng)用程序的腳手架工具。

Yeoman 是一款腳手架工具，可以幫助開發(fā)人員創(chuàng)建項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼。yo 是 Yeoman 的命令行管理工具，可以在命令行運(yùn)行 yeoman  的命令。

generator 生成器則是 Yeoman 中具體的腳手架。針對(duì)不同的項(xiàng)目，例如網(wǎng)站、APP、小程序等，有不同的腳手架生成器。

Yeoman 使用說明及使用步驟：

• 全局安裝 yo：npm install -g yo

• 安裝 generator，不同的 generator 可以生成不同的項(xiàng)目：

npm install -g generator-webapp  ||  npm install -g generator-node

• 通過 yo 運(yùn)行 generator：yo webapp || yo node

• 啟動(dòng)應(yīng)用：npm run start

使用步驟：

1：明確你的需求;

2：找到合適的 Generator;

3：全局范圍安裝找到的 Generator;

4：通過 Yo 運(yùn)行對(duì)應(yīng)的 Generator;

5：通過命令行交互填寫選項(xiàng);

6：生成你所需要的項(xiàng)目結(jié)構(gòu);

自定義 Generator

基本使用

一個(gè) Generator 就對(duì)應(yīng)了一個(gè)類型的項(xiàng)目，我們可以通過自定義的 Generator  實(shí)現(xiàn)一個(gè)自己的腳手架工具，高度定制適合自己的腳手架工具。

創(chuàng)建 Generator 實(shí)際上就是創(chuàng)建一個(gè) NPM 模塊， Generator 基本結(jié)構(gòu)：

如果想生成多個(gè)，只需要?jiǎng)?chuàng)建對(duì)應(yīng)的目錄及文件即可。

還有一點(diǎn)需要注意， Generator 的名字必須是 generator-的形式。

創(chuàng)建一個(gè)文件夾，然后初始化項(xiàng)目 npm init -y

安裝 Generator 基類，基類提供了很多工具函數(shù)，讓我們方便地完成定制化

npm install yeoman-generator

然后按照目錄要求，創(chuàng)建 generator-sample\generators\app\index.js 文件。

注意文件夾及文件名不要寫錯(cuò)：generator-xxx\generators\xxxx\index.js

index.js：

最后使用 npm link 命令，將 generator-sample 掛載為全局命令。如果出現(xiàn)意外，可以使用 npm config get prefix  命令查找 npm 全局目錄，然后查看 generator-sample 是否存在，確認(rèn)全局命令創(chuàng)建成功后，就可以使用 yo sample  命令在新的目錄中生成文件內(nèi)容。

生成的內(nèi)容是我們手動(dòng)創(chuàng)建的，不夠靈活。

使用模板創(chuàng)建文件

創(chuàng)建 generators\app\templates\foo.txt 目錄及文件。這是一個(gè)模板文件，內(nèi)部可以使用  EJS(https://ejs.bootcss.com/) 模板標(biāo)記輸出數(shù)據(jù)。

例如：<%= title%>

其他的EJS語法也支持，如：

<% if (success) { %>

西嶺老濕

<% }%>

寫好模板文件之后，我們就可以使用模板的方式生成文件內(nèi)容了。

相對(duì)于手動(dòng)創(chuàng)建每一個(gè)文件，模板的方式大大提高了效率，特別是在文件較多且復(fù)雜的情況下

命令行交互

創(chuàng)建模板 \app\templates\index.html

創(chuàng)建 Vue 腳手架

和之前一樣，我們創(chuàng)建好一個(gè) generator-xiling-vue 的項(xiàng)目目錄，使用命令 npm install yeoman-generator  安裝基類，在入口文件中完成命令行交互和文件寫入的相關(guān)內(nèi)容。

因?yàn)槲覀冃枰褂媚０宓姆绞綄懭胛募?nèi)容，所以需要?jiǎng)?chuàng)建模板文件。這里就不再手動(dòng)寫了，直接使用已經(jīng)創(chuàng)建好的進(jìn)行修改使用。直接復(fù)制現(xiàn)有 Vue 的空項(xiàng)目代碼，到  templates 中。

然后修改名稱部分，在 generator-xiling-vue\generators\app\templates\public\index.html  文件中，如果不需要替換轉(zhuǎn)義，使用兩個(gè) %% 進(jìn)行屏蔽，重寫時(shí)就會(huì)跳過。

修改好模板后，就可以寫入文件內(nèi)容了，回到 generator-xiling-vue\generators\app\index.js  入口文件中，將模板中的相對(duì)路徑及文件名存入數(shù)組，然后使用十足遍歷的方式寫文件內(nèi)容，代碼如下：

最后，依然使用 npm link 掛載一個(gè)全局命令行，然后在此創(chuàng)建一個(gè)新的項(xiàng)目目錄，在目錄的命令行中執(zhí)行 yo xiling-vue 就可以創(chuàng)建一個(gè)  Vue 項(xiàng)目。

如果想讓更多的功能加入到腳手架中，我們只需要按照這個(gè)邏輯添加內(nèi)容或者模板文件就可以了，一個(gè)自定義的 Vue 腳手架就已經(jīng)創(chuàng)建完成了。

腳手架的工作原理

腳手架的工作流程：通過命令行工具啟動(dòng)一個(gè)程序，在命令行交互中，獲取用戶輸入，然后創(chuàng)建對(duì)應(yīng)的代碼文件。

接下來我們通過更加原始的方式，創(chuàng)建一個(gè)極簡(jiǎn)的腳手架工具，來體會(huì)腳手架的工作原理。

首先我們創(chuàng)建一個(gè)項(xiàng)目文件夾 mycli ，然后執(zhí)行命令 npm init -y 初始化項(xiàng)目;

然后執(zhí)行命令 npm install ejs inquirer 安裝兩個(gè)插件，ejs 是模板語法插件，inquirer 是命令行交互插件。

然后在 \mycli\package.json 文件中添加代碼"bin": "cli.js",用于指定腳本的入口文件。

因?yàn)槭悄_本命令代碼，因此在 cjs 入口文件中，需要添加首行文件頭。

腳手架的工作過程：

1. 通過命令行交互詢問用戶問題

2. 根據(jù)用戶回答的結(jié)果生成文件

了解了工作流程后，先準(zhǔn)備模板文件，然后再按照流程進(jìn)行代碼的實(shí)現(xiàn)。

創(chuàng)建模板文件代碼

腳手架邏輯實(shí)現(xiàn)

完成后，在項(xiàng)目目錄下執(zhí)行 npm link 掛載全局命令，然后就可以使用 mycli 這個(gè)命令，創(chuàng)建項(xiàng)目文件了。卸載命令行可以使用 npm  unlink。

關(guān)于“怎么實(shí)現(xiàn)自己的腳手架工具”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。