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-devLast updated
Was this helpful?