建立自己的腳手架工具

常用的腳手架工具

yeoman

用於建立腳手架開發的工具，居於node.js開發的

基本使用

先全域性安裝yeoman 的i/o工具yo

//使用yarn安裝 yarn global add yo //使用npm安裝 //npm install yo --global

還需安裝對應的generator

//使用yarn安裝 yarn global add generator-node //使用npm安裝 //npm install generator-node --global

通過yo執行generator

cd path/pare //進入乙個位置 mkdir my-module //利用mkdir命令建立資料夾 yo node

命令執行之後會出現命令互動式，填寫的內容會更改相應的目錄

這樣他就建立好了乙個基礎的檔案目錄結構

當然在再有些專案中，需要定製自己的專案建構，那就需要自定義去定製

自定義generator

基於yeoman搭建自己的腳手架，把常用的放到自己的腳手架中

建立generator模組

generator本質上就是乙個npm模組，有特定的結構

generators- /------生成器目錄 ---- --預設生成器目錄 index.js -- ----預設生成器實現 component/ ---- --其他生成器目錄 index.js -- ----其他生成器實現 package .json -- ----模組包配置檔案

//此檔案作為generator 的核心入口
//需要匯出乙個繼承自 yeoman generator的型別
//yeoman generator 在工作時會自動呼叫我們在此型別中定義的一些生命週期方法
//我們在這些方法中可以通過呼叫父類提供的一些功能，例如檔案寫入
const generator =
require
('yeoman-generator'
)module.exports =
class
extends generator ])
.then
(answers =>
this
.answers = answers
})}writing()
// this.fs.copytpl(tmpl,output,context)
//模板檔案路徑
const tmpl =
this
.templatepath
('bar.html'
)//輸出目錄路經
const output =
this
.destinationpath
('bar.html'
)//模板資料上下文
const context =
this
.answers
this
.fs.
copytpl
(tmpl,output,context)
}}

這是我的目錄建構

bar.html 檔案的內容

想嘗試使用該腳手架把當前的檔案鏈結到全域性

yarn link  //把檔案鏈結到全域性

在你想用的資料夾中輸入

yo //如yo sample這裡的名字是你定義的生成器名/generators-/  ------生成器目錄我這是sample，是yo

const generator = require('yeoman-generator')
module.exports = class extends generator 
]).then(answers => 
this.answers = answers})}
writing ())}}

將每個檔案匯入

如果你想大家都是用這個，那你需要發布到他的官方中

plop

plop是乙個小而美的腳手架工具，簡單的說說，用在的場景比如：有些目錄有多個不同型別的檔案，有基本的格式如react中有.css .js .test.js 這些檔案，那我們在建立這些檔案的時候需要乙個乙個檔案的建立，這個時候我們可以使用plop,用命令列工具去生成所有，並帶上基礎的模板。

簡單使用

首先要將plop安裝到全域性環境

npm i plop -g

再將plop安裝到當前專案中

npm i plop -d

在跟目錄中建立乙個plopfile.js 檔案這是plop的入口檔案

如：

module.
exports
= plop =>],
actions:
[}/}.js'
,//匯出的檔案路徑
templatefile:
'plop-templates/component.js.hbs'
//模板檔案路徑},
}/}.css'
,        templatefile:
'plop-templates/component.css.hbs'},
}/}.test.js'
,        templatefile:
'plop-templates/component.test.js.hbs'}]})}

這是我的專案建構

使用的話就用

plop component

回答命令列問答，就會按照你填寫的檔名生成三個不同的檔案

如我生成的hwader元件

好了，就寫到這個，我還在學習中，寫的能力不強，不過我會去完善自己的寫作能力的。謝謝**。

建立自己的腳手架工具

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

實現自己的腳手架工具（1）

yeoman web腳手架工具

建立自己的腳手架工具

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

實現自己的腳手架工具（1）

yeoman web腳手架工具

相關推薦