Introdução e Demonstração
yeoman é um andaime de uso geral que pode ser usado para definir suas próprias ferramentas de andaime
Princípio fundamental:
yo + geradores diferentes = projetos diferentes
Use rapidamente um gerador para construir projetos
Observação: vamos gerar um modelo de desenvolvimento de plug-in eslint como exemplo! ! ! ! ! ! ! ! ! ! ! !
Primeiro, você precisa confirmar o ambiente (deve ter um ambiente de nó)
node -v
npm -v
Altere a origem do espelho para um espelho doméstico (para garantir uma velocidade de download mais rápida das dependências)
npm config set registry https://registry.npmmirror.com
dica: Você pode visualizar a fonte do espelho por meio do registro npm config get *
Instale o comando yo globalmente
npm i yo -g
Instale o gerador gerador correspondente globalmente
npm i generator-eslint -g
O formato do gerador é generator-name
Crie um projeto e entre no diretório
mkdir yeoman-eslint
cd yeoman-eslint
Execute o gerador correspondente através de você
yo eslint
O gerador pode ser omitido ao usar-
Personalize um gerador mystudy
construção do projeto
1. O próprio gerador também é um projeto, que precisa ser criado
mkdir generator-mystudy
cd generator-mystudy
npm init -y
Nota: O nome do projeto do gerador deve começar com generator-
2. Instale a classe base no projeto
npm i yeoman-generator -S
Existem muitos métodos encapsulados neste plug-in, usaremos este plug-in quando o desenvolvermos posteriormente.
3. Edite o arquivo de entrada
generator-mystudy/generators/app/index.js
Como podemos criar vários geradores, o arquivo é denominado generators
Não se preocupe com o motivo pelo qual o arquivo de entrada foi criado dessa maneira, esta é a especificação oficial e a explicaremos em detalhes posteriormente. Vamos experimentar o processo primeiro.
Desenvolva gerador de mystudy
Antes de aprender o conteúdo a seguir, reforce o estudo da classe js primeiro! !
Basta escrever uma linha de código no arquivo de entrada
// 引入生成器的父类
const Generator = require("yeoman-generator");
// 导出继承的子类
module.exports = class extends Generator {
// 子类被new时，test方法会自动执行
test(){
// 这里没有使用console.log();方法，而是直接使用了父类封装的log方法，因为console在某些情况可能出错
this.log("我的第一");
}
};
Agora, um gerador simples está concluído. Em teoria, podemos usar diretamente npm i generator-mystudy -g localmente . No entanto, primeiro precisamos tornar o diretório generator-mystudy acessível para npm globalmente.
Visualize o diretório raiz da instalação global do npm
npm root -g
Para observar se nosso diretório está definido como um diretório global, podemos primeiro abrir o diretório raiz npm
abra esta pasta na janela
start D:\Program\node\node_modules
Vincule o projeto à raiz npm (acesso global ao projeto)
npm link
Depois de executar o comando, você pode descobrir que o atalho no diretório foi criado e agora você pode acessar o projeto globalmente.
experimente nosso gerador
yo mystudy
dica: gerador - pode ser omitido
Agora, abra o console e veja que o conteúdo do gerador está impresso. Nosso gerador já está funcionando normalmente, confira!
Melhorar o gerador de mystudy
Ideias:
- pergunte, obtenha informações
- Gerar uma estrutura de projeto predefinida
- instalar dependências
Antes de tudo, precisamos entender o método de construção, consulta, modelo de renderização e dependências de instalação e outras funções do Generator.
Para os seguintes nomes de função, etc., adotamos a API oficial. Este artigo se concentra na experiência. Você pode aprender sobre o uso específico no próximo artigo.
Interação com o usuário
A interação do usuário é feita por meio do método prompting , que é uma API oficial
O processo interativo aqui se refere ao conteúdo de requirejs, então podemos nos referir a requireJs para métodos de uso específicos
// 引入生成器的父类
const Generator = require("yeoman-generator");
// 导出继承的子类
module.exports = class extends Generator {
// 构造方法可以处理自定义的命令行参数
constructor(args, opts) {
super(args, opts);
}
// 1.询问，获取信息
prompting() {
// prompt方法返回一个promise，用于询问用户信息，并返回一个结果对象
return this.prompt([
{
// 问题类型，需要用户输入
type: "input",
// 信息储存的字段
name: "projectName",
// 提示信息
message: "请输入项目名称：",
// 默认值 this.appname默认是项目的文件名
default: this.appname,
},
{
type: "input",
name: "username",
message: "请输入您的名称：",
default: "",
},
]).then((answers) => {
this.log(answers);
});
}
// 2.生成预定义的项目结构
// 3.安装依赖
};
Neste ponto, quando executarmos yo mystudy na linha de comando, as informações da consulta serão executadas e o objeto de informações de que precisamos será retornado
Gerar estrutura do projeto
A API de escrita oficial é usada para gerar a estrutura do diretório , e métodos como this.sourceRoot() , this.destinationRoot() e this.fs.copyTpl são usados para gerar a estrutura do projeto (gerar nosso projeto de acordo com o modelo) .
// 引入生成器的父类
const Generator = require("yeoman-generator");
// 导出继承的子类
module.exports = class extends Generator {
// 构造方法可以处理自定义的命令行参数
constructor(args, opts) {
super(args, opts);
}
// 1.询问，获取信息
prompting() {
.....
}
// 2.生成预定义的项目结构
writing() {
// 获取模板目录
let srcDir = this.sourceRoot();
// 获取目标目录（在哪里执行命令就是哪里）
let destDir = this.destinationRoot();
// 将目标目录内容生成到模板目录内
this.fs.copyTpl(srcDir, destDir,this.answers);
}
// 3.安装依赖
};
instalar dependências
Caso queira instalar automaticamente as dependências ao gerar o projeto, basta executar o método install .
// 引入生成器的父类
const Generator = require("yeoman-generator");
// 导出继承的子类
module.exports = class extends Generator {
// 构造方法可以处理自定义的命令行参数
constructor(args, opts) {
super(args, opts);
}
// 1.询问，获取信息
prompting() {
.....
}
// 2.生成预定义的项目结构
writing() {
....
}
// 3.安装依赖
install() {
this.env.options.nodePackageManager = "npm"
console.log('this.env.options: ', this.env.options);
}
end(){
this.log("项目创建成功")
}
};
Até agora, um gerador personalizado básico tomou forma.