脚手架开发--yeoman

115 阅读2分钟

介绍

Yeoman 是一个通用的脚手架系统,允许通过generator创建任何的 app ,自动安装依赖等待。

yo 是 Yeoman 命令行工具,它允许项目利用脚手架模板来创建。 Yo 和 generators 的使用常用 npm 来安装。

例如安装了 generator-webapp 后,就可以通过 yo webapp 对模板进行初始化,生成工程文件。

generator 开发

通过开发自己的generator就可以实现定制的脚手架。

一个generator的典型格式如下,,

├───package.json 
└───generators/ 
├───app/ 
│ └───index.js
└─── templates

templates为模板文件夹,通过app/index.js进行配置。

app.js 对generators对象进行拓展,触发其生命周期函数。

  • initializing - 初始化方法(检查当前项目状态、获取配置等)
  • prompting - 提示用户输入选项的地方
  • configuring - 保存配置(创建.editorconfig文件和其他元数据文件)
  • default - 如果方法名称与优先级不匹配,则会将其推送到该组
  • writing - 执行文件写操作,即项目文件写入文件系统中
  • conflicts - 处理冲突的地方(内部使用)
  • install - 运行安装的位置(npm、bower)
  • end - 最后执行,可清除临时文件
const generators = require('yeoman-generator')
module.exports = generators.Base.extend({
  // The name `constructor` is important here
  constructor: function () {
    generators.Base.apply(this, arguments)
  },
  prompting() {
    return this.prompt([
      {
        type: 'input',
        name: 'appname',
        message: 'Your project name',
        default: this.appname,
      },
    ]).then(
      function (answers) {
        this.appname = answers.appname
        this.log('app name', answers.appname)
      }.bind(this)
    )
  },
  writing() {
    const templateDate = {
      appname: this.appname,
    }
    // #复制templates下的所有文件到generator
    this.fs.copy(this.templatePath('**'), this.destinationPath(`./${this.appname || 'vitamin-app'}`))
    // 渲染
    this.fs.copyTpl(
      this.templatePath('package.json'),
      this.destinationPath(`./${this.appname || 'vitamin-app'}/package.json`),
      templateDate
    )
  },
})

templates 中的文件可以使用ejs 模板引擎。使用copytpl方法去复制作为模板的处理中的文件。

"name": "<%= appname %>",

具体写法可以将generator-webapp库下载后进行参考学习。

generator 的包名格式为 generator-tempname,发布或link后就可以通过 yo tempname 命令进行启动。

用web脚手架工具开发webapps | Yeoman 中文网 (yowebapp.github.io)

The web's scaffolding tool for modern webapps | Yeoman

整合工具

通过 yo 命令进行脚手架安装需要全局安装 yeoman,如果想直接通过 npm create xxx 的方式进行安装,就需要使用yeoman的底层api yeoman-environment 实现。

#!/usr/bin/env node
var yeoman = require('yeoman-environment');
var env = yeoman.createEnv();
// 引入一个generator
env.register(require.resolve('generator-xxx'), 'xxx:app');
// 可以进行拓展 或 直接调用env.run()
var GeneratorNPM = generators.Base.extend(/* put your methods in here */);
env.registerStub(GeneratorNPM, 'xxx:app');
//运行指定命名空间的generator
env.run('xxx:app');

package.json 设置有两个注意点,

  • 设置bin字段,指向脚本入口,
  • 命名以create-为开头,因为再npm create xxx时默认指向的为 create-xxx包

注:npm create 为 npm init 的别名

从键入npm create xxx-app 到生成项目文件的流程如下

npm create xxx-app 
//1 执行 create-xxx-app 中 bin 字段下的脚本 
//2 脚本通过env.register(require.resolve('generator-xxx'), 'xxx:app'); 加载generator-xxx,并关联到命名空间 'xxx:app' 
//3 通过 env.run('xxx:app') 运行generator,等同于运行 yo xxx 的命令,而对用户来说,不需要单独安装 yeoman。