使用yeoman搭建脚手架并发布到npm

前言

最近主要在写前端的模板类项目，由于其中的webpack配置和引进数据注入ejs模板的方法大同小异，所以萌发出把该模板框架提取出来作为一个常用的脚手架，也方便以后同事可以进行复用。

之前在看《前端工程化:体系设计与实践》里面有提到过Yeoman构建脚手架,先入为主，所以就用了Yeoman来搭建自己的脚手架

准备

1，node环境

在终端上运行node -v，如果显示node版本号，说明已有node环境

2，安装Yeoman工具集

 npm install --global yo

验证是否已经安装

  yo --version

创建一个脚手架的基础框架

1，新建一个文件夹，以generator-name命名，其中name是创建的generator的名字。

npm init 初始化项目，在package.json中增加：

 // files 名称需和项目目录文件名一致，比如这里的app，项目初始化时便能找到app 下的内容
  "files": [
     "app"
   ],
   "keywords": [
     "yeoman-generator"
   ],

和依赖项

 "dependencies": {
     "chalk": "^2.4.2",
     "glob": "^7.1.3",
     "lodash": "^4.17.11",
     "yeoman-generator": "^3.2.0"
  }

2，新建app文件夹，并新建index.js文件

 // 引进yeoman-generator
 let Generator  = require('yeoman-generator');
 module.exports = class extends Generator {
 // 安装脚手架时的提问信息
   prompting(){
     var questions = [
       {
         type: 'input',
         name: 'projectName',
         message: '输入项目名称',
         default: this.appname
       },
       {
         type: 'input',
         name: 'projectAuthor',
         message: '项目开发者',
         store: true,
         default: ''
       },{
         type: 'input',
         name: 'projectVersion',
         message: '项目版本号',
         default: '0.0.1'
       }
     ]
     return this.prompt(questions).then(
       function(answers){
         for(var item in answers){
           answers.hasOwnProperty(item) && (this[item] = answers[item]);
         }
       }.bind(this));
   }
   writing(){
     // 安装脚手架时复制的内容块的目录
     this.fs.copy(
       this.templatePath('module/'),
       this.destinationPath('')
     );
   }
 }

3，新建templates文件，并把index.js提到的复制内容块的目录下放着你自己的脚手架内容

目录如下：（其中module为你的整个脚手架内容）

连接项目

 npm link

验证

新建新的项目workpalce，执行yo，如果看到Cms Module说明搭建脚手架成功~

发布到npm上

1，npm注册

在npm上进行注册

2，登录

在控制台上执行npm login，可以看到：

3，发布

在generator-name项目于根目录下执行npm public发布到npm上

注意：每次进行修改后上传都需要在package.json上修改版本

一般来说，版本分成三部门：a.b.c

• a表示大版本号，一般是项目较大改动的时候修改，a为0的时候，表示项目处于开发阶段。
• b表示功能更新，或者项目模块改动的时候增加。
• c表示小改动，如修bug。

下载npm上的脚手架

1，确保你本地安装了yo

 yo --version

2，下载

执行npm install -g generator-cms-module就可以把脚手架放在你自己的yo上

3，引用

在项目上运行yo，会出现可以看到Cms Module的个人generator，选择并按提示输入信息就可以把该脚手架的代码create到项目里

github