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

成都創(chuàng)新互聯(lián)公司2013年成立，先為秀嶼等服務(wù)建站，秀嶼等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為秀嶼企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

腳手架工具

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

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

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

我們的項目中，會有各種文件夾及文件，腳手架就可以一鍵生成：

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

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

通用型腳手架工具 Yeoman

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

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

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

Yeoman 使用說明及使用步驟：

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

• 安裝 generator，不同的 generator 可以生成不同的項目：

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

• 通過 yo 運行 generator：yo webapp || yo node

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

使用步驟：

1：明確你的需求;

2：找到合適的 Generator;

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

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

5：通過命令行交互填寫選項;

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

自定義 Generator

基本使用

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

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

如果想生成多個，只需要創(chuàng)建對應(yīng)的目錄及文件即可。

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

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

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

npm install yeoman-generator

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

注意文件夾及文件名不要寫錯：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)容是我們手動創(chuàng)建的，不夠靈活。

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

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

例如：<%= title%>

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

<% if (success) { %>

西嶺老濕

<% }%>

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

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

命令行交互

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

創(chuàng)建 Vue 腳手架

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

因為我們需要使用模板的方式寫入文件內(nèi)容，所以需要創(chuàng)建模板文件。這里就不再手動寫了，直接使用已經(jīng)創(chuàng)建好的進(jìn)行修改使用。直接復(fù)制現(xiàn)有 Vue 的空項目代碼，到  templates 中。

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

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

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

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

腳手架的工作原理

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

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

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

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

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

因為是腳本命令代碼，因此在 cjs 入口文件中，需要添加首行文件頭。

腳手架的工作過程：

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

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

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

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

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

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

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

本文題目：怎么實現(xiàn)自己的腳手架工具
本文來源：http://jinyejixie.com/article12/ppepdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、ChatGPT、Google、網(wǎng)站內(nèi)鏈、、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)