yeoman 开发脚手架的工具

title: yeoman 开发脚手架的工具 id: 857a9860a8c07af67b903615f910dae3 tags: [] date: 2000/01/01 00:00:00 updated: 2023/03/04 19:29:12 isPublic: true --#|[分隔]|#--

yeoman 开发脚手架的工具

官方文档

使用过 vue 或 react 的应该都熟悉，我们的「前端项目」，是运行在一个「编译项目」中的，我们写了自己的 vue、jsx，需要通过这个「编译项目」的编译功能，才能运行、打包等等。

这个为我们写好编译功能的项目，提供了 ES6 语法编译、scss 编译、代码压缩和其他很多看不到的功能，而它就是我们常说的脚手架。

vue-cli 和 create-react-app 是两个前端比较知名的，用来生成脚手架的工具。

现在这个 yeoman，它的功能和目标，就是开发一个和 vue-cli 和 create-react-app 的类似的「脚手架生成器」。

需要先全局安装工具 yo。

npm install -g yo

所有使用 yo(yeoman) 开发的项目，都需要先把这个项目全局安装，或者通过 npm init 置入全局工具目录中，再使用 yo 来执行，来执行这个项目，来生成脚手架。

基础步骤

创建文件夹，进入，初始化一个 npm 项目：

mkdir generator-study

cd generator-study

npm init

安装 yeoman-generator

npm install yeoman-generator@4

注意这里要安 @4 的版本，否则后面使用 yo 运行该项目时，会报错：

This generator (study:app) requires yeoman-environment at least 3.0.0, current version is 2.10.3, try reinstalling latest version of 'yo' or use '--ignore-version-check' option

按照官方文档，创建文件夹目录(router目录可以先不创建)

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js

/generators/app/index.js 中添加代码：

代码 export 一个继承于 yeoman-generator 的类，当执行此项目时，类中的方法会依次执行。

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // The name `constructor` is important here
  constructor(args, opts) {
    // Calling the super constructor is important so our generator is correctly set up
    super(args, opts);

    // Next, add your custom code
    this.option('babel'); // This method adds support for a `--babel` flag
  }

  method1() {
    this.log('method 1 just ran');
  }

  method2() {
    this.log('method 2 just ran');
  }
};

修改 package.json 的项目信息

下面是需要修改的两行：

name 字段，一定要是一个以 “generator-” 开头的名字，后面使用 yo 运行时，可以忽略。
main 字段，是引入或执行这个项目时的默认入口文件，改成我们上面写的那个 index.js 文件。

{
  "name": "generator-study",
  "main": "generators/main/index.js"
}

使用 npm link，把脚手架工具置入 npm 工具的指令库中

因为是脚手架工具，类似于 vue-cli、create-react-app，正常是需要使用 npm 全局安装他们，然后通过指令，使用他们来初始化项目。

所以，我们需要把我们的脚手架生成工具，做成一个全局的 npm 工具。

这里使用 npm 指令，把这个项目做成全局依赖包：

npm link

执行后，会在 node 的全局 node_modules 中生成一个软链接，软链接的名字，是该项目 package.json 中的 name 的值，指向的就是该项目。
这个 node 的全局 node_modules，里面放着的其实我们全局安装过的 npm 依赖，比如 npm、yarn、cnpm、vue-cli 等的项目文件们，都在这里放着。

执行脚手架生成器

下面可以执行一下我们的项目了，使用 yo 去执行，这里注意，前面有说，我们的项目的 package.json 中的 name，必须是 “generator-” 开头，这里执行时，要把 “generator-” 省略，如果我们的名字就是 generator-study，那这里执行如下指令：

yo study

会输出如下打印，也就是我们上面 index.js 中的两个方法中的打印：

method 1 just ran
method 2 just ran

使用复杂些的功能

和用户进行交互

如下所示，修改 generators/app/index.js 文件，添加方法：

this.prompt：
- type: "input"：弹出输入请求，让用户输入，并提供默认值。
- type: "confirm"：弹出是或否的询问。

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // 和用户交互的方法（方法名随意）
  async interaction() {
    const answers = await this.prompt([
      {
        type: "input", // 请求用户输入，得到用户输入的字符串
        name: "name", // 用来存放输入值的变量名
        message: "你的项目名", // 请求用户输入的提示
        default: this.appname // 默认值
      },
      {
        type: "confirm", // 请求用户输入 y 或 n，得到布尔值
        name: "cool", // 用来存放输入值的变量名
        message: "你想启用这个很酷的功能吗?" // 提示性消息
      }
    ]);

    this.log("app name", answers.name);
    this.log("cool feature", answers.cool);
  }
}

执行 yo study 来执行，可查看效果。

使用文件模板

创建文件 generators/app/templates，此文件夹用户放置模板文件们。

创建文件 generators/app/templates/tml.html，内容如下：

代码中 <%= title %> 使用了 title 这个变量。

<html>
  <head>
    <title><%= title %></title>
  </head>
</html>

编辑 generators/app/index.js 文件，添加一个方法，使用方法来使用模板：

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // 使用模板，生成文件到用户项目的某个目录下
  async useTemplate() {
    // 复制 template
    this.fs.copyTpl(
      // 第一个参数，模板在 templates 中的文件名
      this.templatePath('t.html'),
      // 第二个参数，模板将放到用户目标项目中的文件位置和文件名
      this.destinationPath('public/index.html'),
      // 第三个参数，一个对象，使用模板时传入的模板变量
      { title: 'Templating with Yeoman' }
    );
  }
};

然后就可以使用了，因为这个例子生成了新的文件，为了不影响现在这个正在开发的项目，需要去其他空文件夹使用指令。

在桌面创造空文件 temp，在文件夹中启动终端，执行：

yo study

可以看到，temp 本来是空文件夹，现在出现了项目中配置的文件：

└── public
    └── index.html

并且，html 中的 title 已经被替换成传入的变量。

生成 package.json 文件

可使用 this.fs.extendJSON() 来生成 json 文件。

并使用 this.npmInstall() 来执行 npm install 功能。

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  creatPackage() {
    const pkgJson = {
      devDependencies: {
        eslint: '^3.15.0'
      },
      dependencies: {
        react: '^16.2.0'
      }
    };

    // 创建文件
    this.fs.extendJSON(this.destinationPath('package.json'), pkgJson);

    // 执行 npm install
    this.npmInstall();
  }
};

this.npmInstall 有其他用法，比如执行以下代码：

this.npmInstall(['lodash'], { 'save-dev': true });

则相当于执行：

npm install lodash --save-dev

Previouswebpack 版本5的报错 Next同步异步和微任务宏任务

Last updated 9 months ago

Was this helpful?