使用Yeoman定製前端腳手架

2021-09-16 19:45:48 字數 2948 閱讀 3036

首先附上yeoman官網:

我製作的前端腳手架:generator-jake-front

以及我在前端同學的分享會上的分享ppt:yeoman.key

如果想快速製作乙個腳手架,並且不需要實現特別複雜的定製化,看完這篇文章足夠,如果想要實現複雜的功能,需要去檢視官方文件。

需要安裝nodejs

全域性安裝需要的工具

npm install -g yo

npm install -g generator-generator

執行下面命令,執行之前並不需要自己新建資料夾,yo generator會幫助我們建好資料夾

yo generator
專案名稱自己設定,必須是以generator-開頭,協議選擇mit,在設定了一系列問題之後

自動生成如下目錄

generator-test

├── license

├── readme.md

├── __tests__

├── generators

│ ├── index.js

│ └── templates

│ └── dummyfile.txt

└── package.json

promptsgenerator與使用者互動的主要方式。prompt模組由 inquirer.js提供,你可以參考它的api,在可用的提示選項列表。

prompt方法是非同步的並且返回乙個 promise。在你執行下乙個任務前去完成它,你需要返回 promise。

module.exports = class extends generator ];

return this.prompt(prompts).then(props => );

}};

做一些適當的修改,實現更通用的腳手架。可以查閱api

this.user.git.name(): 獲取全域性git使用者名稱

this.user.git.email(): 獲取全域性git郵箱

this.github.username(): 獲取github使用者名稱

定義物件中的type,管理互動方式。使用input實現控制台輸入。

type: 'input',

name: 'author',

message: 'author',

default: this.user.git.name()

這樣便實現了讓使用者輸入作者名稱,預設為git全域性配置的使用者名稱。然後在其他配置中使用this.props.author實現獲取使用者輸入。

generatorsthis.fs暴露了所有的檔案的方法,這是乙個例項,mem-fs editor - 確保為所有可獲得的方法選擇模組檔案。

值得注意的是,通過this.fs暴露commit,你不應該在你的generator去呼叫它。yeoman在執行迴圈的衝突階段結束後,在內部呼叫它。

例如:./templates/index.html的檔案內容是:

然後,我們將使用copytpl方法去複製作為模板的處理中的檔案。copytpl使用的是ejs 模板引擎。

module.exports = class extends generator 

);}};

一旦generator執行成功,index.html將會包含:

json也同樣適用上面的語法,配置package.json檔案可以適應不同的專案。

install方法設定在檔案copy完成之後執行的命令,例如

module.exports = class extends generator 

});}};

由於我們在本地開發,並不知道用起來怎麼樣,所以可以使用npm link命令,相當於在全域性安裝了此腳手架,然後在新資料夾中執行yo,選擇腳手架,便可以測試

generator-test/package.json中的name要在沒被建立過,才可以發布。

發布需要乙個npm的賬號,如果沒有使用npm adduser建立;

如果已有賬號,執行npm login登陸。

在專案根目錄下,執行npm publish就可以發布了。如果更新後重新發布,注意修改根目錄下的package.json檔案中的版本號。

使用npm unpublish 包名命令可以撤銷發布,只有在發包的24小時內才允許撤銷發布的包。

使用Yeoman定製前端腳手架

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

前端腳手架

腳手架目錄 idea build configwebpack 配置檔案 dist打包輸出目 node modules依賴目錄 src assets資源 components自定義元件 pages每個vue 檔案對應乙個頁面,或者頁面的乙個元件 router路由 整個專案的路由跳轉配置 config....

yeoman編寫自己的腳手架

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