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 全域性安...