脚手架工具

什么是脚手架工具

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

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

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

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

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

毕竟早点下班还是很爽的

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

常用的脚手架工具

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

• 给特定框架服务

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

• 通用类型

  • Yeoman
  • Plop

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

Yeoman

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

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

Yeoman 像一个运行脚手架工具的平台。它需要 对应的 Generator 才能够使用。 Yeoman 这种方式可以让我们编写自己的 Generator，来得到一个符合自己需求的脚手架工具

基本使用

由于 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

注意：使用 generator 时 需 去除前缀

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

  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

这个 Sub 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 is a little tool that saves you time and helps your team build new files with consistency.

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 来创建一个已经包含基础代码的 .vue 文件

// 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

一般我们会把 Plop 使用的模板都放在 plop-templates 文件夹中便于管理

<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 的使用还是很简单的。很符合她 小而美 的特点，用于创建项目中同类型的文件，还是很方便的

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

• 项目根目录创建 plopfile.js

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

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

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

脚手架工作原理

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