yeoman 的补充

1、安装 Yeoman

• yarn global add yo 全局安装 yeoman
• yarn global add generator-node 安装对应的generator
• mkdir my-module
• cd my-module
•  yo node 通过 yo 运行 generatot 

2、Sub Generator 

• yo node:cli
• yarn link
• yarn 
• my-module --help 

Yeoman 使用步骤总结 

• 明确你的需要
• 找到合适的 Generator
• 全局范围安装找到的 Generator
• 通过 yo 运行对应的 Generator
• 通过命令交互填写选项
• 生成你所需要的项目结构
  
  在官网找到对应的 generator-webapp 
  
  yarn global add generator-webapp
  
  yo webapp

3、创建 Generator 模块 

•  mkdir generator-sample
• cd  generator-sample\
• yarn init 
• yarn add yeoman generator
• 创建 generaotors app index.js 具体看代码

  // 此文件作为 Generator 的核心入口
  // 需要导出一个继承自 Yeoman Generator 的类型
  // Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
  // 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
  
  const Generator = require('yeoman-generator')
  
  module.exports = class extends Generator {
    prompting () {
      // Yeoman 在询问用户环节会自动调用此方法
      // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
      return this.prompt([
        {
          type: 'input',
          name: 'name',
          message: 'Your project name',
          default: this.appname // appname 为项目生成目录名称
        }
      ])
      .then(answers => {
        // answers => { name: 'user input value' }
        this.answers = answers
      })
    }
    writing () {
      // Yeoman 自动在生成文件阶段调用此方法
  
      // // 我们这里尝试往项目目录中写入文件
      // this.fs.write(
      //   this.destinationPath('temp.txt'),
      //   Math.random().toString()
      // )
  
      // -------------------------------------------------------
  
      // // 通过模板方式写入文件到目标目录
  
      // // 模板文件路径
      // const tmpl = this.templatePath('foo.txt')
      // // 输出目标路径
      // const output = this.destinationPath('foo.txt')
      // // 模板数据上下文
      // const context = { title: 'Hello zce~', success: false }
  
      // this.fs.copyTpl(tmpl, output, context)
  
      // -------------------------------------------------------
  
      // 模板文件路径
      const tmpl = this.templatePath('bar.html')
      // 输出目标路径
      const output = this.destinationPath('bar.html')
      // 模板数据上下文
      const context = this.answers
  
      this.fs.copyTpl(tmpl, output, context)
    }
  }

   

• yarn link 

•  

  mkdir my-pro 

• cd my-pro

• yo sample

•  根据模板创建文件，创建 templates文件夹 foo.txt 

   

   

4、 Vue Generator 案例

• mkdir generator-zce-vue
• cd generator-zce-vue
• yarn init
•  yarn add yeoman generator
• code .
• 新建 generator ==> app ==> index.js
• 新建 templates ，将项目模板考入到里面
• yarn link
• 定位一个全新的目录 mkdir my-proj
• cd my-proj
• dir
• yo zce-vue

5、 发布 Generator

•  echo node_modules > .gitignore
• git init
• git status
• git add .
• git commit -m "feat:initial commit"
• 到自己的GitHub创建一个仓库
• git remote add origin 自己仓库地址
• git push -u origin master 将本地分值代码发送到仓库分支
• yarn publish 发布模块
• yarn publish --registry-https://registry.yarnpkg.com 将项目推送到yarn 官方镜像
• 在 npm 官网看到我们发布的项目 https://www.npmjs.com/package/gulp-browser
  
  npmjs.com/package/henerator-zce-vue