前言

最近主要在写前端的模板类项目,由于其中的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-generatorlet 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为你的整个脚手架内容)

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

连接项目
npm link

验证

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

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

发布到npm上

1,npm注册

在npm上进行注册

2,登录

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

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

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到项目里