最通用的腳手架工具Yeoman

2021-10-25 11:48:50 字數 1879 閱讀 3622

yeoman官方介紹說是用於創造現代化的web應用的腳手架工具

不同於vue-cli,yeoman更像是乙個腳手架執行平台,我們可以通過yeoman搭配不同的generator,去建立任何型別的專案,也可以通過建立我們自己的generator,從而去定製我們自己的前端腳手架

在很多專注於框架開發的人眼中,yeoman過於通用,不夠專注,所以更願意使用vue-cli等之類的腳手架

環境為node 和npm 

安裝yarn global add yo

安裝對應generator模組配合使用

安裝yarn global add generator-node

2.建立乙個node模組的專案使用

mkdir yeoman

cd yeoman

yo node

如:在專案中加入eslint等

例子: 在上述專案中新增cli,使之變為cli應用

yo node:cli

會在package.json末尾新增bin屬性(檔案入口)

並在lib中新增cli.js檔案

安裝依賴後,link到全域性yarn link

此時執行 yeoman --help 會得到命令提示和你建立專案的資訊

並不是每乙個generator都有子級的generator,根據官方文件來檢視

node的generator提供了下面幾種子級的生成器

特定的模組名稱 generator-name

mkdir generator-smaple

cd generator-smaple

yarn init

yarn add yeoman-generator 安裝generator基礎模組

在執行過程中yeoman 會自動執行yeoman-generator的生命週期方法

prompting,詢問使用者

writing,寫入時

const generator = require('yeoman-generator')

module.exports = class extends generator ,

]).then(answer=>

object.assign({},)})}

writing()

}

建立目錄

mkdir generator-tdn-vue

cd generator-tdn-vue

初始化並安裝基類

yarn init

yarn add yeoman-grnerator

建立基本目錄

將準備好的原始檔放入模版資料夾中

把可能發生變化的地方用模版引擎的方式去挖坑,用於之後使用者填入修改

把每乙個檔案都通過模板轉換到目標路徑

通過for迴圈把每乙個模版生成到對應的檔案

yarn link 軟連線到全域性

這時可建立新專案測試一下

mkdir my-proj

cd my-proj

yo tdn-vue

即可完成

在github上建立倉庫並上傳

yarn publish 發布

如果沒有賬號請申請再發布

如果問**映象,請用 yarn publish --registry=

如果第一次註冊,請郵箱驗證

yeoman編寫自己的腳手架

在 gulp 時代,就開始有使用 yeoman,感覺是乙個特別方便的腳手架.在使用angularjs的時候,經常用這個腳手架生成一些小東西去學習 yeoman 上有乙個比較完善的學習教程 getstart 但是突然想到有沒有 generator 的 generator 果然有.操作命令如下 npm ...

使用Yeoman定製前端腳手架

首先附上yeoman官網 yeoman.io 我製作的前端腳手架 generator jake front 以及我在前端同學的分享會上的分享ppt yeoman.key 如果想快速製作乙個腳手架,並且不需要實現特別複雜的定製化,看完這篇文章足夠,如果想要實現複雜的功能,需要去檢視官方文件。需要安裝n...

使用Yeoman定製前端腳手架

首先附上yeoman官網 我製作的前端腳手架 generator jake front 以及我在前端同學的分享會上的分享ppt yeoman.key 如果想快速製作乙個腳手架,並且不需要實現特別複雜的定製化,看完這篇文章足夠,如果想要實現複雜的功能,需要去檢視官方文件。需要安裝nodejs 全域性安...