前端工程化-Yeoman & Plop.js

目的

通过Yeoman和Plop js了解脚手架的设计思路

步骤

Yeoman

实验环境

# 1. 全局安装yo
npm i -g yo

# 2. 全局安装名为webapp生成器（也可以自定义）
npm i -g generator-webapp

# 3. 进入桌面 --> 创建yeomanTest目录 --> 进入该目录
cd desktop --> mkdir yeomanTest --> cd yeomanTest

# 4. 在该目录下生成webapp脚手架
yo webapp

脚手架并未生成在我指定的yeomanTest目录下，而是在用户的根目录下？

原因：由于根目录下有.yo-rc.json文件，根据这个文件决定在哪个路径生成脚手架

解决：
终端进入根目录，ls -al可以看到.开头的文件，发现的确有个.yo-rc.json文件，用rm -rf .yo-rc.json（-rf慎用）删除此文件，就能在你想要的目录下生成脚手架。
 

脚手架做了什么事？
基于gulp进行初始化配置，生成项目结构，自动安装依赖等
 

yo命令做了什么事呢？
搜索并列出本地可用的生成器（generator），选择生成器后便进行之后的操作，包括交互配置、写入文件、安装依赖。
* 交互配置：向用户提问，将填入的配置信息作为参数传给模板（调用prompting函数）
* 写入文件：将项目模板指定的文件复制到新项目的指定目录中（调用writing函数）
* 安装依赖：下载安装所有在package.json文件中的依赖和node模块（调用npm install，bower install命令行）

Plop js

核心是inquirer命令行工具和handlebar模板引擎的整合。

实验环境

# 1. 全局安装yo
npm i -g plop

# 2. 进入桌面 --> 创建plopTest目录 --> 进入该目录
cd desktop --> mkdir plopTest --> cd plopTest

# 3. 在项目中将plop作为开发依赖进行安装
npm i -D plop

# 4. 在项目根目录中创建plopfile.js文件和plop-template目录

plopfile.js配置文件

module.exports = function (plop) {
  // setGenerator创建生成器，接受两个参数：第一个为生成器名字，第二个为配置对象
  plop.setGenerator('template', {
    description: 'this is a template for vue',
    // prompts数组传递给inquirer
    prompts: [
      {
        type: 'input',
        name: 'directoryName',
        message: 'directory name',
        default: 'new-directory'
      },
      {
        type: 'input',
        name: 'menuName',
        message: 'menu name',
        default: 'new-menu'
      }
    ],
    // actions数组是要执行的操作的列表
    actions: [
      {
        type: 'add', // 表示添加文件
        path: 'pages/{{directoryName}}/{{menuName}}/index.vue', // 要生成的文件路径
        templateFile: 'plop-templates/list.hbs', // 基于的文件模板
      },
    ]
  });
};

?例子以天鸽为例，根据输入目录名和菜单名创建一个通用的列表模板

总结

1. 能通过命令行（commander）与用户交互（inquirer）获取用户的定制化配置信息
2. 处理定制化配置并结合项目默认配置生成cli
3. 构建工具和模版最好能分离，能基于不同开发需求选择不同的模板（参考vue-cli）
4. 能够检测npm的更新（update-notifier）