yeoman脚手架的使用

脚手架的学习

yeoman

    一款高效，开源的web应用脚手架搭建系统，专注提供脚手架功能。并不是针对某个项目，没有针对性。

yeoman使用

    安装 yarn global add yo

    必须搭配特定的generator使用，需要找到对应的generator

以generator-node为例：

     C:\Users\123\Desktop\blogs\modules\app>yo node
     ? Module Name (app)
     ? Description
     ? Project homepage url
     ? Author's Name (cuiweijun)
     ? Author's Email (834719201@qq.com)
     ? Author's Homepage ()
     ? Package keywords (comma to split) test node 
     ? Send coverage reports to coveralls (Y/n)
     ? Enter Node versions (comma separated)
     ? GitHub username or organization (cuiweijun)
     ? Which license do you want to use? (Use arrow keys)
       Apache 2.0
     > MIT
       Mozilla Public License 2.0
       BSD 2-Clause (FreeBSD) License
       BSD 3-Clause (NewBSD) License
       Internet Systems Consortium (ISC) License
       GNU AGPL 3.0
     (Move up and down to reveal more choices)
     
     I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself. 下载状态

下载完后会出现卡死状态 按下回车就ok。生成一个node的项目结构就出来了。

自定义generator

Generator本质就是一个npm的模块

Generator的基本结构

必须有一个generators的文件夹

• 文件夹下有个叫app的文件夹 存放生成器对应的代码

• app文件夹里有个index.js的文件

  |-generators/                  生成器目录
  |  |_app/					   默认生成器目录
  |    |_index.js                默认生成器实现
  |_package.json                 模块包配置文件
  

  含有多个sub generator

  |-generators/                  生成器目录
  |  |_app/					   默认生成器目录
  |    |_index.js                默认生成器实现
  |  |_componenet/			   其他生成器目录
     |_index.js				   其他生成器实现
  |_package.json                 模块包配置文件
  

  • package.json

  • 命名必须是generator-的形式命名 比如 generator-sample

过程操作

• 创建package.json yarn init

• 下载generator的基类 yeoman-generator

  //generator-demo 文件夹下目录
  generators
  node_modules
  package.json
  yarn.lock
  //generators/app/index.js
  const Generator = require('yeoman-generator');
  module.exports = class extends Generator{
      initianlizing(){
          //获取当前项目状态，获取基本配置参数等
      }
      prompting(){
          //向用户展示交互式问题收集关键参数
      }
      configuring(){
          //保存配置相关信息且生成配置文件（名称多为'.'开头的配置文件,例如.editorconfig）
      }
      default(){
          //未匹配任何生命周期方法的非私有方法均在此环节*自动*执行
      }
      writing(){
          //依据模板进行新项目结构的写操作
      }
      conflicts(){
          //处理冲突(内部调用，一般不用处理）
      }
      install(){
          //使用指定的包管理工具进行依赖安装(支持npm,bower,yarn)
      }
      end(){
          //结束动作，例如清屏，输出结束信息，say GoodBye等等
      }
  }
  

  • 创建好之后，使用yarn/npm link 链接全局环境

  • yo name 就会执行