用Yeoman脚手架工具搭建自己的脚手架

Harleens
1,526 阅读7分钟

前言

脚手架本质作用是用于创建项目基础结构，提供项目规范和约定。

脚手架主要分为两类，一种是通用脚手架，另一种是专用脚手架（React: create-react-app 、Vue: Vue-Cli、Angular: Angular-Cli等）。

Yeoman 为通用脚手架工具，它们可以根据模板生成对应的结构，这种类型的脚手架一般都很灵活，容易扩展.

Yeoman

简介

Yeoman 是一个通用脚手架，允许创建任何类型的应用程序(Web，Java，Pvthon，C#等)。 用Yeoman 写脚手架非常简单，Yeoman 提供了 yeoman-generator 让我们快速生成一个脚手架模板，我们的主要工作就是把模板文件写好。也就是说，我们可以通过创建自己的generator，去定制创建属于我们自己的前端脚手架。

Yeoman主要由三部分组成：脚手架工具（yo）、构建工具（grunt/gulp）、包管理器（bower）。这三个工具d都是分开独立开发的，需要配合使用，打造一套通用脚手架，可以用来定义自己的脚手架工具。

Yeoman官网：yeoman.io/

运行周期

Yeoman Generator 被创建后（构造函数必然是最先被调用的），会依次调用它原型上的方法，且每一个方法中的 this 都被绑定为 Generator 实例本身，调用的顺序如下：

  • initializing -- 初始化方法（检查状态、获取配置等）
  • prompting -- 获取用户交互数据（this.prompt()）
  • configuring -- 编辑和配置项目的配置文件
  • default -- 如果generator内部还有不符合任意一个任务队列任务名的方法，将会被放在default这个任务下进行运行
  • writing -- 填充预置模板
  • conflicts -- 处理冲突（仅限内部使用）
  • install -- 进行依赖的安装（eg：npm，bower）
  • end -- 最后调用，做一些clean工作

优点和缺点

优点：更像脚手架的运行平台，Yeoman搭配不同的generator可以创建任何类型的项目，我们可以根据自己的generator定制自己的前端脚手架

缺点：优点即缺点，过于通用不够专注

基础使用

以下是generator 创建一个项目的步骤

  1. 全局安装，使用 yarn 或 npm 都可以。
yarn add yo -g | npm install yo -g
复制代码
  1. 安装对应项目类型的 generator。
yarn add generator-node -g | npm install generator-node
// yarn add generator-boilerplate -g | npm install generator-boilerplate
// yarn add generator-cli -g | npm install generator-cli
// yarn add generator-editorconfig -g | npm install generator-editorconfig
// yarn add generator-eslint -g | npm install generator-eslint
// yarn add generator-git -g | npm install generator-git
// yarn add generator-readme -g | npm install generator-readme
// yarn add generator-jasmine -g | npm install generator-jasmine
// yarn add generator-mocha -g | npm install generator-mocha
// yarn add generator-webapp -g | npm install generator-webapp
复制代码

image.png 注意：使用 yarn 会出现 yo 命令找不到的错误，原因是环境变量中没有配置yarn的全局路径。 此时使用替换成 npm 全局安装即可。generator-node 模块同理。

  1. 运行 generator，将generator-前缀去掉yo node即可。我选node作为这次演示的用例
yo node
复制代码

子生成器 Sub Generator

使用场景：在已有项目中创建文件，可以按照指定的模板进行文件创建。适用于不需要通过完整 generator 创建项目，只需要一部分功能的情况。步骤如下：

  1. 创建 cli 命令，命令规则
yo node:cli
复制代码
  1. 使用 yarn link 将模块加入到全局范围，这样就可以在终端中使用 cli 命令了。链接到全局
yarn link
复制代码
  1. 安装 sub generator 依赖项
yarn
复制代码
  1. 查看模块加入结果
my-module --help    // my-module 是 Sub generator 名称
复制代码

并不是所有的 generator 都支持创建 Sub generator，实际使用时，需要查看对应的 generator 文档。

自定义 Generator

generator 命名方式： generator-<name>

步骤如下：

  1. 在当前工程下创建自定义 generator。第 4 步创建的 generator 会以 yeoman 提供的 generator 作为基础模板。generator项目名称为：czmvues
mkdir generator-czmvues
cd generator-czmvues
yarn init | npm init
yarn add yeoman-generator | npm install yeoman-generator
code .
复制代码
  1. 在 vscode 中创建以下目录：
generators/app/index.js
复制代码

index.js 代码如下：

/**
 * Index.js 是 Generator 入口文件，需要导出一个类型，改类型继承自 Yeoman Generator 模块
 * Yeoman Generator 运行时会调用相应的工作流方法。在这些方法中，我们可以使用父类提供的工具
 * 方法，如文件写入等。
 */

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  writing() {
    /**
     * Yeoman 在生成文件时会自动调用此方法
     * 我们可以尝试在当前项目目录中写入方法
     * fs 为 Yeoman 封装的 fs 模块，功能更加强大
     * write 函数第一个参数为写入的文件路径，第二参数为写入的文件内容。
     */
    //this.fs.write(this.destinationPath("temp.txt"), Math.random().toString());
            const templates = [
            'pnpm-lock.yaml',
            'jsconfig.json',
            '.npmrc',
            '.gitignore',
            'babel.config.js',
            'vue.config.js',
            'package.json',
            'README.md',
            'public/favicon.ico',
            'public/index.html',
            'src/App.vue',
            'src/main.js',
            'src/assets/logo.png',
            'src/components/HelloWorld.vue',
        ]

        for (const path of templates) {
            this.fs.copyTpl(
                this.templatePath(path),
                this.destinationPath(path),
                this.answers
            )
        }
  }
};
复制代码
  1. 使用 yarn link 在第一步的文件路径上注册 generator 模块
yarn link
复制代码
  1. 使用注册成功的 generator 模块
yo czmvues
复制代码

基于模板创建单文件

模板文件支持 EJS 语法。

EJS 模板文件 foo.txt 内容如下：

我是一个标题： <%= title %>
复制代码

在上一步代码的 writing 回调函数中添加以下逻辑：

const tmpl = this.templatePath("foo.txt");
// 输出目标路径
const output = this.destinationPath("foo.txt");
// 模板数据上下文   用户交互输入的内容
const context = { title: "Hello Harleens" };
this.fs.copyTpl(tmpl, output, context);
复制代码

处理用户输入内容的函数

在 prompting 函数中处理用户输入

prompting() {
    /**
     * 用户输入是一个数组，里面每一项是一个问题
     */
    return this.prompt([
      {
        type: "input",
        name: "name",
        message: "Your project name：",
        default: this.appname // 项目文件名字
      },           
      {
        type: 'input',
        name: 'version',
        message: '靓仔, 输入个版本号',
        default: '2.0'
      },
      {
        type: 'input',
        name: 'harleens',
        message: '靓仔, 冲冲冲~~~',
        default: 'Y'
      }
    ]).then(answers => {
      // 输入结果以 key:value 形式存放在 answer 对象上
      // 在 writing 函数中可以获取到
      this.answers = answers;
    });
  }
复制代码

Vue 项目 Generator

  • 基础项目结构文件准备(如：src、package.json)
  • 创建一个 generator 新项目，编写 generator/app/index.js 文件
  • prompting - 用户输入处理
  • template 目录准备，路径为 generator/app/template。在 template 文件中，需要替换为用户输入的地方使用 EJS 语法。
  • writing - 处理文件靠别拷贝
  • yarn link 将 generator 添加本地全局模块。再创建一个新项目目录，新项目目录中使用 yo generator 名称的方式进行新项目初始化创建。

image.png 运行generator，输入yo czmvues指令操作，创建一个脚手架就完成了。

如何发布 Generator

发布到npm 自己写完的generator可以发布到npm上使用，这次是测试代码，我这里就不发布了。

基本流程：

  • 创建本地仓库，提交代码到本地，关联到远程仓库
  • 如果使用的npm是淘宝的镜像，在publish之前要改回原地址，因为淘宝的镜像源是只读的，而你的包是要发布到npm上的
  • 改完镜像地址后就可以运行 npm publish

如何使用脚手架

全局安装脚手架，比如generator-xxx

npm install -g generator-xxx
复制代码

使用yo调用脚手架生成项目

yo xxx
复制代码

生成成功后，进入目录，启动项目。

总结

今天主要介绍了通用脚手架Yeoman的使用，相信大家看完应该知道它的相关用法了， Yeoman主要是利用不同Generator模块来完成他生成不同项目结构的功能。故如果想实现自己的脚手架时，可以自己写一个Generator模块，然后用Yeoman去使用自己写的这个Generator模块即可

参考文章

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下阿绵哈哈。

宝贝们，都看到这里了，要不点个赞呗 👍

写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「关注 + 收藏」。 如有文章有错误或建议，欢迎评论指正，谢谢你。❤️

avatar
文章
阅读
粉丝