首先附上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
prompts
是generator
與使用者互動的主要方式。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
實現獲取使用者輸入。
generators
在this.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 ...