本文先介紹一款通用腳手架（yeoman）的基本使用，然后再利用node.js來開發一個自己的腳手架工具，yeoman腳手架的本質也是通過node.js實作的
什么是腳手架
相信大家應該都用過腳手架，像create-react-app, vue-cli angular-cli等，應該也大概能知道腳手架具體是干嘛的，用來做什么，
腳手架本質就是用來快速生成我們所需要的專案結構，但他最重要的意義卻在于，提供了統一的規范約定，有助于我們團隊專案的開發
常用的腳手架工具
像現在比較流行得 create-react-app, vue-cli, angular-cli，這些都是為特定型別得專案使用得，市面上還有一些比較靈活得腳手架工具，如：yeoman， plop等，這些腳手架本質都是通過node.js來實作得工具，今天我們主要來看看yeoman
初識yeoman
yeoman是一款通用型得腳手架工具，它可以根據相應得模板來生成一套對應得專案結構，使用起來比較靈活，
yeoman與其他常用腳手架不同的是，他更像是一個腳手架運行平臺，他提供一定的cli指令，然后搭配任意型別的generator模塊，來生成任意型別的專案結構，也就是說他的本質是利用generator模板來生成專案結構的，而不同型別的generator模塊，可以讓我們生成不同型別的專案結構，而yeoman主要通過yo命令來呼叫這個generator模塊從而實作創建我們所需的專案結構
generator模塊
generator模塊主要以 generator-(name) 這種形式定義，通過yo呼叫時，只需要呼叫后面的name即可，如：generator-sample 模塊，我們只需要運行yo sample即可
那么yeoman是如何使用的，我們來看看，
1、首先，全域安裝yeoman
yarn global add yo
或者
npm install yeoman -g
安裝完成后，如果無法運行，那么請手動配置環境變數，配置完后，請手動重啟vscode
yeoman安裝完成后，我們需要選用特定的generator模塊來生成對應的專案結構，這里，我們隨便選一個generator模塊做示例： 如generator-node模塊
2、首先，需要先安裝此模塊
yarn global add generator-node
3、安裝完成后，直接使用yo node(使用時不需要加generator)來運行generator檔案，生成專案結構目錄
生成的目錄結構如下：
4、sub Generator（Generator模塊下的子generator），有的generator模塊存在子generator，但有的不存在子generator，當存在子generator時，可通過yo generator模塊:子generator來執行，如generator-node下存在一個cli子generator，那么可以通過yo node:cli 來執行
執行完后，新增了一個cli.js，說明這個子generator所做的事情就是新增一個這樣的檔案，
yeoman總結
yeoman的基本使用我們已經看完了，yeoman本質就是利用不同的generator模塊去生成不同的專案結構，那么如果我們想自己生成一套自己的專案結構代碼，那么我們是不是就要自己去寫一套generator模塊啊，沒錯，下面，我們來寫一套自己的generator模塊，來快速生成一套自己的專案模板
自定義generator模塊
1、新建generator模塊檔案夾（generator模塊必須以generator開頭）
mkdir generator-myVue
cd generator-myVue
下面，我們先來看下一個generator模塊的基本結構
其實，app是默認的生成器目錄，下面的index.js為主要的功能實作檔案，如果需要定義其他子生成器時（sub generator），只需要在app同級新建一個新的檔案夾就行，下面我們繼續來晚上generator
2、初始化package.json檔案
yarn init
3、新建生成器目錄generators并且新建默認的生成器目錄以及默認生成器實作檔案
mkdir generators // 創建檔案夾
cd generators // 進入檔案夾
mkdir app // 創建檔案夾
cd app // 進入檔案夾
ls > index.js // 創建index.js檔案
cd .. // 回到上級目錄
cd ..
其實，index.js檔案為我們Generator模塊的核心入口檔案
此檔案需要匯出一個繼承自yeoman-generator的類
yeoman-generator提供了generator的一個基礎類，這個基礎類中提供了一系列的生成器函式，讓我們自定義generator時更便捷
4、安裝yeoman-generator，此模塊可以提供一個generator的基礎類
yarn add yeoman-generator
5、準備模板檔案
在app檔案夾下新建templates目錄
cd generators
cd app
mkdir templates
將目標檔案拷貝到templates目錄下
6、在index.js中撰寫generator核心邏輯
/**
* @description 此檔案為Generator的核心入口
* 需要匯出一個繼承自Yeoman Generator的型別
* Yeman Generator在作業時會自動呼叫我們在此型別中定義的一些生命周期方法
* 我們在這些方法中可以通過呼叫父類提供的一些工具方法實作一些功能，例如檔案寫入
*/
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
prompting () {
return this.prompt([
{
type: 'input',
name: 'name',
message: 'Your project name',
default: 'app'
}
])
.then(answers => {
this.answers = answers
})
},
writing () {
// templates陣列中是每一個模板檔案的路徑
const templates = [
'.browserslistrc',
'.editorconfig',
'.eslintrc.js',
'.gitignore',
'babel.config.js',
'package.json',
'README.md',
'vue.config.js',
'yarn.lock',
'public/favicon.ico',
'public/index.html',
'src/assets/logo.png',
'src/components/loading/Loading.vue',
'src/components/nodata/NoData.vue',
'src/containers/Full.vue',
'src/containers/header/Header.vue',
'src/containers/sidebar/Sidebar.vue',
'src/lang/en.js',
'src/lang/index.js',
'src/lang/zh.js',
'src/router/index.js',
'src/router/router.config.js',
'src/store/modules/app.js',
'src/store/modules/user.js',
'src/getter.js',
'src/index.js',
'src/styles/variables.scss',
'src/utils/axios.js',
'src/utils/crypto.js',
'src/utils/localStorage.js',
'src/utils/utils.js',
'src/views/actions/Action.vue',
'src/views/dashboard/Create.vue',
'src/views/instruments/index.vue',
'src/views/shopFloor/ShopFloor.vue',
'src/views/users/forgotPass.vue',
'src/views/users/Login.vue',
'src/views/404.vue',
'src/App.vue',
'src/main.js'
]
templates.forEach(item => {
// item是每一個檔案的路徑
// copyTpl方法3個引數分別是模板路徑，寫入目標路徑，命令列互動獲取到額值
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}
7、修改templates目錄下的模板檔案中需要根據用戶輸入而變動的部分
8、將此generator模板關聯到全域
yarn link
9、測驗
新建一個檔案夾，進入到該檔案夾內 運行 yo myVue，看是否能在新建的檔案夾中為什么新建一個新的專案結構
cd ..
mkdir test
cd test
yo myVue
以上就是yeoman的用法
之前我們也說過，yeoman的本質就是通過node.js來實作的一個工具，那么我們是不是也可以用node.js自己來實作一個腳手架呢，當然是可以的，下面我們就來看看該怎么自己實作一個簡單的腳手架工具
實作自己的腳手架工具
目標：定義一個小型的腳手架工具，根據模板生成自己的專案目錄
思路：
1、建立自己的腳手架目錄 my-scaffolding
2、初始化package.json檔案
3、在package.json中添加bin欄位，指定cli應用入口檔案（cli應用入口檔案為實際實作我們腳手架功能的檔案）
4、新建cli.js檔案，并添加檔案頭 #!/usr/bin/env node
Node Cli應用檔案必須要有這樣的檔案頭
如果是Linux 或者 macOS系統下還需要修改此檔案的讀寫權限為755
通過chmod 755 cli.js 實作修改
5、新增templates目錄，并將模板添加到該目錄下，以便到時候讀取該目錄下的檔案
6、開始寫腳手架工具實作（開始撰寫cli.js），此時，需要明確我們需要做些什么
6.1、首先，毫無疑問，我們要先發起一個命令列互動去詢問用戶相關問題，此時我們需要用到inquirer模塊來發起命令列互動
6.2、我們需要讀取template模板中的檔案內容，然后將模板檔案的內容利用ejs模板引擎結合命令列互動得到的用戶輸入結果來渲染模板中的內容，這期間需要用到path模塊來讀取路徑，以及ejs模板引擎來渲染模板
6.3、然后我們需要將渲染之后的內容寫入到我們的目標目錄中
6.4、此期間，讀取template模板目錄以及寫入目標檔案我們都需要用到node.js核心模塊fs
7、明確了我們需要用到的模塊后，我們需要先安裝相應模塊（inquirer, ejs），并引入相應模塊（inquirer,ejs, path, fs）
path和fs是node.js內置模塊，無需安裝
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
8、開始寫腳手架實作邏輯
8.1、inquirer發起命令列互動
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
// 發起命令列互動詢問
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name'
}
]).then((answers) => { console.log(answers) } // 得到用戶輸入的結果
8.2、獲取模板所在目錄，以及需要寫入的目標目錄，并讀取templates下的模板
// 獲取模板目錄
const tempDir = path.join(__dirname, 'templates')
// 檔案輸出目錄
const outDir = process.cwd()
fs.readdir(tempDir, (err, files) => { // 讀取模板目錄，files是從目錄中讀取到的檔案路徑
if (err) throw err
files.forEach((file) => {
})
})
8.3、將讀取到的模板內容利用ejs進行渲染(結合命令列互動時用戶的輸入結果)
ejs.renderFile(path.join(tempDir, file), answers, (err, result) => {
if (err) throw err
// file 是files回圈后得到的每個檔案的路徑
// result是通過ejs決議后的每個檔案的內容
})
8、4 將渲染后的結果寫入到目標目錄中
// 將結果寫入到目標目錄
ejs.renderFile(path.join(tempDir, file), answers, (err, result) => {
if (err) throw err
// file 是files回圈后得到的每個檔案的路徑
// result是通過ejs決議后的每個檔案的內容
// 將結果寫入到目標目錄
fs.writeFileSync(path.join(outDir, file), result)
})
下面我們看一下完整代碼
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
// 利用inquirer模塊發起命令列互動詢問
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name'
}
]).then((answers) => {
// 獲取模板目錄
const tempDir = path.join(__dirname, 'templates')
// 檔案輸出目錄
const outDir = process.cwd()
// 將模板目錄下的模板轉換為目標檔案
fs.readdir(tempDir, (err, files) => {
if (err) throw err
files.forEach((file) => {
// 利用模板引擎渲染檔案
ejs.renderFile(path.join(tempDir, file), answers, (err, result) => {
if (err) throw err
// file 是files回圈后得到的每個檔案的路徑
// result是通過ejs決議后的每個檔案的內容
// 將結果寫入到目標目錄
fs.writeFileSync(path.join(outDir, file), result)
})
})
})
})
9、實作邏輯寫完后，我們需要通過yarn link 或者 npm link將其關聯到全域(關聯到全域后，可以在任何地方去使用此腳手架)
10、測驗腳手架情況
mkdir test
cd test
執行命令 my-scaffolding
查看test目錄下是否有生成我們需要的專案結構
說明此腳手架已經搭建完成，并可正常使用了
提交npm
正所謂做事做全，現在我們來將我們做好得腳手架提交到npm上，以后后續可以直接通過npm 或者yarn下載后使用（yarn 和 npm）包管理庫是共享得，所以用npm或者yarn提交都行
1、準備作業：
要提交一個模塊到npm上，首先，我們必須將這個模塊上傳至開源庫中，如 github
如何提交github這個我就不多說了 相信用過git得都會
我們這里已經將該模塊提交到github上了，提交完成后
直接在本地倉庫中打開gitbash
2、輸入npm login --registry=https://registry.npmjs.org
此命令是用于登錄npm
故前提，需要大家先到npm官網上去注冊一個賬號，且必須進行郵箱驗證，如果沒有進行郵箱驗證，也是提交不上去得，會報錯
403 403 Forbidden - PUT https://registry.npmjs.org/my-scaffolding - Forbidden
輸入npm login --registry=https://registry.npmjs.org 后
會讓你輸入npm的用戶名密碼，輸入完成后，登錄成功
3、直接npm publish 或者 yarn publish
有時會提示你輸入一些版本之類的，輸入完后就提交完成了（首次提交不需要輸入）
4、測驗
此時，我們再重新通過yarn或npm下載這個包試試
mkdir test // 新建一個新的檔案夾
cd test // 進入檔案夾
// 打開命令列工具
yarn add my-scaffolding
安裝完成后
此時，再執行命令下載的包的命令 my-scaffolding，即可生成我們的模板
我們之前自己寫的generator-myVue 模塊，也可以以同樣的方式發布到npm中，
這個我們就不繼續演示了，大家可以自己試試
總結
今天主要介紹了通用腳手架yeoman的使用，相信大家看完應該知道他的相關用法了，
yeoman主要是利用不同generator模塊來完成他生成不同專案結構的功能，故如果想實作自己的腳手架時，可以自己寫一個generator模塊，然后用yeoman去使用自己寫的這個generator模塊即可
另外介紹了一下如何使用node.js去寫自己的腳手架工具，大家也可以不使用yeoman，而使用node.js自己去寫一個自己的腳手架，從而去實作生成自己想要的專案結構
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/274445.html
標籤：其他