使用yeoman搭建腳手架並發布到npm

2022-05-01 20:39:10 字數 1545 閱讀 4692

最近主要在寫前端的模板類專案,由於其中的webpack配置和引進資料注入ejs模板的方法大同小異,所以萌發出把該模板框架提取出來作為乙個常用的腳手架,也方便以後同事可以進行復用。

之前在看《前端工程化:體系設計與實踐》裡面有提到過yeoman構建腳手架,先入為主,所以就用了yeoman來搭建自己的腳手架

1,node環境

在終端上執行node -v,如果顯示node版本號,說明已有node環境

2,安裝yeoman工具集

1 npm install --global yo
驗證是否已經安裝

1  yo --version
1,新建乙個資料夾,以generator-name命名,其中name是建立的generator的名字。

npm init 初始化專案,在package.json中增加:

1

//2 "files": [4],

5 "keywords": [

6 "yeoman-generator"

7 ],

和依賴項

1 "dependencies":

1

//引進yeoman-generator

2 let generator = require('yeoman-generator');

3 module.exports =class extends generator ,13,

25]26return

this

.prompt(questions).then(

27function

(answers)

31 }.bind(this

));32}33

writing()

40 }

3,新建templates檔案,並把index.js提到的複製內容塊的目錄下放著你自己的腳手架內容

目錄如下:(其中module為你的整個腳手架內容)

1 npm link
新建新的專案workpalce,執行yo,如果看到cms module說明搭建腳手架成功~

1,npm註冊

在npm上進行註冊

2,登入

在控制台上執行npm login,可以看到:

3,發布

在generator-name專案於根目錄下執行npm public發布到npm上

注意:每次進行修改後上傳都需要在package.json上修改版本

一般來說,版本分成三部門:a.b.c

1,確保你本地安裝了yo

1 yo --version
執行npm install -g generator-cms-module就可以把腳手架放在你自己的yo上

3,引用

在專案上執行yo,會出現可以看到cms module的個人generator,選擇並按提示輸入資訊就可以把該腳手架的**create到專案裡

github

使用Yeoman定製前端腳手架

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

使用Yeoman定製前端腳手架

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

yeoman編寫自己的腳手架

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