脚手架工具

什么是脚手架工具

用于创建项目基础结构的一种工具、提供项目的基础规范和约定等

当开发人员经过较长时间的工作经历后，并有过多个项目开发经历后。我们会发现，很多项目会有很多类似的点，往往这些类似的点，在大部分情况下是相同的。例如

• 相同组织结构
• 相同开发范式
• 相同模块依赖
• 相同工具配置
• 甚至某些类似业务的项目还有着相同基础代码

这些相同的部分如果都采用手动的方式（例如 Ctrl C / Ctrl V）将会导致大量的重复内容要做。很不合理，并且还容易出错。

而 脚手架工具 就是用于解决这一类问题。有了 脚手架 我们就可以通过 脚手架 快速搭建特定项目的基础骨架。然后再基于该骨架上进行后续的开发工作，从而大大提高我们的开发效率。

脚手架用于解决在创建项目过程中，那些复杂并重复的工作

常用的脚手架工具

在前端领域中，脚手架主要分为 2 类，一类是 给 特定框架 服务的脚手架工具、另一类是 通用类型 的脚手架工具

• 给特定框架服务

  • vue-cli
  • angular-cli
  • create-react-app

• 通用类型

  • Yeoman
  • Plop

对于 特定框架的 脚手架 ，如果你使用的对应的框架，那它提供的脚手架工具。几乎是贯穿在整个框架的使用周期中的。

Yeoman

Yeoman 是一款用于创建现代化的 Web 应用的脚手架工具

基本使用

由于 Yeoman 是一个运行在 Node 平台上的一个工具。我们需要确定 Node 是否安装好。

1. 检查 Node 环境

node -v

npm -v

2. 安装 Yeoman

使用 npm 或者 yarn 都可

yarn global add yo

# or

npm install -g yo

3. 然后我们再安装一个 generator-node 的 Generator

yarn global add generator-node

4. 使用新安装的 generator 创建一个项目

yo node

填写 模块名 、作者 、版本 等，就可以创建成功了

  Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2020/8/24     19:27                lib
d-----        2020/8/24     19:29                node_modules
-a----        2020/8/24     19:27            171 .editorconfig
-a----        2020/8/24     19:27              9 .eslintignore
-a----        2020/8/24     19:27             12 .gitattributes
-a----        2020/8/24     19:27             22 .gitignore
-a----        2020/8/24     19:27             72 .travis.yml
-a----        2020/8/24     19:27            138 .yo-rc.json
-a----        2020/8/24     19:27           1076 LICENSE
-a----        2020/8/24     19:27           1228 package.json
-a----        2020/8/24     19:27            664 README.md
-a----        2020/8/24     19:29         195300 yarn.lock

打开 Yeoman 帮我们创建的项目，可以看到 它帮我们创建一个 Node 项目的基本结构、以及基础文件。 并且当我们打开某些配置文件，也能看到一些基础代码 Yeoman 也帮我们生成好了。

到这里我们已经可以发现，使用脚手架来创建项目。大大提高我们的效率。

Sub Generator

有些时候我们不想创建一个完整的项目结构，或者想在已有的项目上增加一些特定类型的文件，比如一些配置文件等。 这些文件会有一些基础代码，手动去写呢比较慢，也会容易写错。而在 Yeoman 中它给我们一个 Sub Generator 的功能，来帮助我们实现这样的需求。

这里我们使用一下上面的 generator-node 生成器提供的 cli Sub Generator

yo node:cli

执行该命令过后，会询问我们是否重写 package-json，这里选择是

conflict package.json
? Overwrite package.json? overwrite
  force package.json
  create lib\cli.js

在 package-json 中，可以看到的确新增了 cli 程序所需要的依赖。执行 yarn 安装新增的依赖，然后把这个 cli 模块 link 到全局测试一下

yarn link

# 成功后运行一下该模块

my-module --help

可以看到这个 cli 应用已经可以成功运行工作了

  yeoman-test

  Usage
    $ my-module [input]

  Options
    --foo  Lorem ipsum. [Default: false]

  Examples
    $ my-module
    unicorns
    $ my-module rainbows
    unicorns & rainbows

注意

并不是所有的 generator 都有 Sub Generator ，我们可以前往对应 generator 官方文档查看。 例如这里的 generator-node 点这

脚手架 Yeoman 使用流程

1. 明确你的需求

2. 找到合适的 Generator

3. 在全局范围安装找的 Generator

4. 用过 yo 运行对应的 Generator

5. 在命令行交互中填写选项

6. 生成你需要的项目结构

自定义 Generator

有时候官方或者社区提供的 Generator 过于通用，无法满足我们的需求。像在项目代码一些基础代码、甚至有些业务代码也是相同的。这时我们就可以定义自己的 Generator 来满足我们自己需求。

下面我们来动手试试吧！其他可参考官方文档 Click Me

Generator 其实就是一个 NPM 模块，并且 Generator 有着特定的结构，如下：

• 特定的目录结构

├───package.json          # 模块配置文件
└───generators/           # 生成器目录
    ├───app/              # 默认生成器
    │   └───index.js      # 默认生成器实现

Sub Generator 的结构

├───package.json          # 模块配置文件
└───generators/           # 生成器目录
    ├───app/              # 默认生成器
    │   └───index.js      # 默认生成器实现
    ├───SubGenerator1/    # 其他生成器
    │   └───index.js      # 其他生成器实现
    ├───SubGenerator2/    # 其他生成器
    │   └───index.js      # 其他生成器实现

• 特定的模块名称

  我们说到 Generator 就是一个 NPM 模块，而 yeoman 对模块名也有规定，必须是以 generator开头 如： generator-<name>

1. 创建 Generator 模块

先创建一个用于存放自定义 Generator 模块的文件夹，进入这个模块初始化成一个 NPM 模块

mkdir generator-sample

cd generator-sample

yran init

然后我们还需要安装一个 yeoman-generator 的模块，这是一个 generator 的基类（鸡肋）,可以帮助我们开发自己的 generator

yarn add yeoman-generator

2. 在创建的 generator-sample 中 按照 上文 创建 对应的目录结构

├───package.json          # 模块配置文件
└───generators/           # 生成器目录
    ├───app/              # 默认生成器
    │   └───index.js      # 默认生成器实现

3. 然后我们在 index.js 中 编写 Generator 生成器代码

// 该文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// 当该模块工作时 会自动调用我们自定义的声明周期方法
// 父类中也为我们提供一些工具方法，给我们使用，如文件写入等

const Generator = require('yeoman-generator')

module.exports = class extends Generator {

  writing() {
    // Yeoman 生成文件阶段自动调用 可以理解未 Vue 中的生命周期函数
    this.fs.write(
      this.destinationPath('test.js'),
      '测试测试'
    )
  }
}

4. 完成后我们将这个 Generator 模块 link 到全局，并使用 Yeoman 来使用我们自定义的 Generator 模块

  PS D:\xxxx\xxxxx\xxxx\generator-sample> yarn link
  yarn link v1.22.4

5. 新创建一个 test 目录 运行自定义的 Generator 模块

  cd ../
  mkdir test
  cd test

  # 运行
  yo sample
   create test.js

以上就是一个 Yeoman Generator 的基本开发流程

Plop 官网

Plop 主要用于在项目过程中，用于创建特定类型的独立文件的一个工具

例如在 Angular 、React 中创建组件时，一个组件往往包含 Html、Css、JavaScript或者更多的文件。如果一个个手动创建并写入文件中的基础代码，体验非常不好，而 Plop 就是帮我做个事情的。

如果你使用过 Angular Cli 的 ng generate 命令 那你应该可以很容易理解 Plop 的作用，以及她带给我们在开发过程中的好处

Plop 基本使用

Plop 也是一个 NPM 模块所以我们需要安装它，但是这里需要注意的是 Plop 主要用 项目过程中 ，所以我们不应该作为全局模块安装，应该作为一个开发依赖安装

1. 安装

  yarn add plop --dev

2. 项目根目录下新建一个 plofile.js 文件

// Plop 入口文件 导出一个函数
// 此函数接受一个 Plop 对象 用于创建生成器任务
module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.vue',
        templateFile: 'plop-templates/component.hbs'
      }
    ]
  })
}

3. 还需要创建一个用创建 .vue 文件的模板文件 plop-templates/component.hbs

<template>
  <div class="{{name}}">
    <h1>{{name}} Component</h1>
  </div>
</template>
<script>
  export default {
    data() {
    },
  }
</script>
<style scoped>
</style>

4. 运行 Plop 命令测试一下

PS D:\xxx\plop-demo> yarn plop component

yarn run v1.22.4
$ D:\xxx\plop-demo\node_modules\.bin\plop component

? component name Home
√  ++ \src\components\Home\Home.vue
Done in 15.64s.

Plop 使用步骤

• 将 Plop 模块做为项目的开发依赖安装

• 项目根目录创建 plopfile.js

• 在 plopfil.js 中编写脚手架任务

• 编写用于生成特定类型问及那的模板

• 通过 Plop 提供的 CLI 程序运行脚手架任务

脚手架工作原理

通过对上面的 2 款脚手架工作原理的介绍和基本使用，我们不难发现 脚手架 工具就是通过 CLI 程序发起一些预设的询问，再将我们的回答结果结合一些 模板文件 来生成对应的项目结构。