What is Yeoman

Yeoman helps you create a new project by providing best practices and tools to help you keep coding efficiently. For this purpose, they provide a build ecosystem, the Generator is a plug-in that can be used to build whole projects or parts of projects using the Yo command

2, through official generator, they established a Yeoman workflow, the flow is a powerful and fixed the client form, it contains tools and frameworks that can help developers quickly beautiful web application architecture, Yeoman provides all responsible for starting the project development, without any manual configuration 3, a headache

2. Application scenarios

Suppose you have a development scenario like this: React + Redux-thunk + Axios + Styled components + Ant Design The development team of the company has completed the development and launching of project A based on the specific technology stack. Now the team needs to carry out A new project B, The basic structure of project A and Project B is the same when TypeScript is added to project A technology during the technical review process, leaving everything else unchanged. So when we did project B, there were two ways

1. Create directory interface from 0, reconfigure packaging environment, install dependencies, etc.

2. Copy A fixed directory structure and files from the original project A. Make changes to different files

Disadvantages:

  • A lot of repetitive work. laborious
  • Modify a lot of files, inadvertently easy to omission, or even error

So can you write a project template, but also support private customization? Customize to your needs. The answer is yes, and here’s plan number three

3. Yeoman scaffolding tool when initializing project B, we only need to type in the terminal and simply configure some values in an interactive way, similar to initializing vue-CLI. When initializing the project, we don’t need to do trivial and repetitive work, Yeoman helps us to start building the project quickly

Three, preparation

  • The node environment
  • NPM or yarn

4. Initialize the project through Yeoman

The open source community has a plethora of project directory templates, using WebApp as an example

1, Global installation yo

yarn global add yo
yarn global generator-generator
Copy the code

2. Find the corresponding generator

Yeoman will help us generate the corresponding project structure and automatically install dependencies based on the corresponding generator

yarn global add generator-webapp
Copy the code

By creating the project with the Yo command, we can install the dependencies we need to choose according to our own needs, and then we have a Web application infrastructure

yo webapp
Copy the code

5. Customize Generator (Build your own scaffold based on Yeomen)

Scaffolding does:

  • Receiving user input
  • Generate a template file based on user input
  • Copy the template file to the target directory (usually the directory where the user is running the scaffolding)
  • Install dependencies

Basic structure of Generator

|- generators/ ............................................ The generator directory | | _ app /... Default generator directory | | index. Js... The default generator | _ package. Json... Module bar configuration fileCopy the code

Creating a folder

generator-vue-project
Copy the code
  • performyarn init
  • The installationYeomanRely onyarn add yeoman-generator
  • Next we create the following files in the project root directorygenerators/app/index.js

Write template code

Generators /app/index.js file

Const Generator = require('yeomen- Generator ') module. Exports = class extends Generator {promping () {return This.prompt ([{type: 'input', // type optional, default is text, i.e. Name: 'name', // name the identity of the user's input item, when getting the user's input value will use message: 'Your project name', // message is a message to the user default: This.appname // User input default value, optional}]). Then (Answers => {this.answers = answers})} writing () {// Const templates = ['.browserslistrc', '.eslintrc.js', '.gitignore', 'babel.config.js', 'package.json', 'README.md', 'yarn.lock', 'public/favicon.ico', 'public/index.html', 'src/App.vue', 'src/main.js', 'src/store/index.js', 'src/views/About.vue', 'src/views/Home.vue', 'src/router/index.js', 'src/components/HelloWorld.vue', 'src/assets/logo.png', 'SRC/tests/unit/example. Spec. Js'] templates. The forEach (item = > {/ / traverse each file path item enclosing the fs. CopyTpl ( this.templatePath(item), this.destinationPath(item), this.answers ) }) } }Copy the code

  • Put the template file into gennerator/app/ Templates, which is the raw material to generate the new project structure

  • Execute YARN Link to create the global module and symlink it to the local module

  • Create a new folder. Yo vue-project Vue-project is our Generator.

  • You can use EJS template syntax in the templates file. Combining the template with user input will generate a new project file that we need to describe in package.json REMADME and index.html with <%= name %>, We then have a directory structure for a Vue project based on Yemoman

cd  my-vue-project
yo vue-project
Copy the code
<%= name %> expression <% if(someAnswer){XXX} %>Copy the code
{
"name": "<%= name %>"
}


Publish the Generator

  • The Generator is essentially an NPM module, so if we publish Genertor we are publishing the NPM module
  • Prepare an NPM account
  • Perform yarn publish
  • If taobao mirror source problem of the yarn publish – registry=https://registry.yarnpkg.com for taobao mirror image source is read-only

9. Yeoman life cycle

  • Initializing – The initialization function
  • Only last targets – Receives user input stage
  • Configguring – Edit and configure the configuration files for the project
  • Default-user-defined function name
  • Writing – Generates the project directory structure stage
  • Conflicts – Consolidates conflicts, such as whether the file to be generated already exists or not
  • Install – Installs dependencies
  • End – Generator end phase, clean work

X. Yeoman assembly process

  • Interactive configurationgenerators/app/index.jsYou can use the COMMAND line interface to ask users questions or directly enter configuration information to transfer template parameters
  • Writing to a file copies the template file to the specified directory. Mainly throughwriting() fs.copyTplTwo functions to perform specific operations
  • Install project dependencies

reference

Yeoman official document

Build your own project scaffolding with Yeoman

This article is formatted using MDNICE