Building my own project scaffolding with yeoman

A fish with a blade 2021-02-23 03:43:27
building project scaffolding yeoman


Create a new project , It usually requires various configurations , such as webpack To configure 、eslint To configure 、 Installation and configuration of various common libraries, etc , It would be more troublesome if we had to do it all over again every time , Therefore, it is necessary to build a common project scaffold .

It's like vue-cli equally , One vue create my_project Command can generate the project structure , And built in webpack And other related basic configuration , Open the box , A fun .

Here's how I use Yeoman Tools to build your own project scaffolding .

One 、 install

npm install -g yo
npm install -g generator-generator
 Copy code 

Global installation yo, Use yo Command to execute scaffolding yo <name>, The name of the scaffolding project is generator- Lead , use yo It's executed without generator- Lead . Such as generator-jeyson Scaffolding project , Execution is yo jeyson

Global installation create scaffolding build project generator-generator, adopt yo generator Projects that can build scaffolding .

Two 、 Use

1、 Use yo Command execution generator The scaffold , Generate projects that build scaffolding

yo generator
# Pop up configuration questions 
# Your generator name (generator-my-projects) Scaffold name , Such as :generator-jeyson-koa
# Description describe , Such as :this is a jeyson's koa project
# Project homepage url Project address , Such as the project github Address , Nothing can be left blank 
# Author's Name The author's name ,jeyson
# Author's Email Author's mailbox ,123@163.com
# Author's Homepage Author's home page ,ljclucky.com
# Package keywords (comma to split) Package keywords , Comma separated koa,webpack,mongoose,redis
# Send coverage reports to coveralls Whether to send a report Y
# Enter Node versions (comma separated) node edition 12.14
# GitHub username or organization
# Which license do you want to use? agreement ,MIT
 Copy code 

After configuration, the project structure will be generated in the current directory :

image-20210221190538073

The core of it is generators Folder .

  • generators/app/templates It is used to store my project template files .

  • generators/app/index.js Entry documents for scaffolding projects , It triggers some life cycles :

    1. initializing - Initialization method ( Check the current project status 、 Get configuration, etc )
    2. prompting - Where users are prompted to enter options
    3. configuring - Save configuration ( establish .editorconfig Files and other metadata files )
    4. default - If the method name does not match the priority , It will be pushed to the group
    5. writing - Perform file write operations , That is, the project file is written into the file system
    6. conflicts - Where conflicts are handled ( For internal use )
    7. install - Where to run the installation (npm、bower)
    8. end - Finally, execute , Temporary files can be cleared

2、 Copy your project to the template file

take generators/app/templates In the catalog dummyfile.text File deletion .

And then put your project in addition to dist、node_modules Copy all project files out of the folder to generators/app/templates Under the table of contents , As my koa project :

image-20210221194114239

3、 To configure generator Entrance file

For details, please refer to the document generator part , complete api

Modify the configuration in the file :

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
module.exports = class extends Generator {
// Use scaffolding to generate your own project 
prompting() {
this.log(
yosay(`Welcome to the kryptonian ${chalk.red('generator-jeyson-koa')} generator!`)
);
const prompts = [
{
type: 'confirm', // Confirm type ,[Y/n]
name: 'someAnswer', // Prompt name 
message: 'Would you like to enable this option?', // Prompt text 
default: true // The default value is 
},
// {
// type: 'input', // Input type 
// name: 'author',
// message: ' Please enter the project author ',
// default: ''
// }
];
return this.prompt(prompts).then(props => {
this.props = props;
});
}
writing() {
this.fs.copy(
// this.templatePath('dummyfile.txt'),
// this.destinationPath('dummyfile.txt')
// Change the above to the following , It means when executing scaffolding generation 
// take templates Copy all files under the template to the current path 
// For details, please refer to the document https://yeoman.github.io/generator/actions_fs.html#.copyTemplate
this.templatePath('**'),
this.destinationPath('./'),
{
globOptions: {
dot: true, // It means match band . The file of 
nodir: true // notes : This option means it doesn't match the empty directory , Force to true, Don't write 
}
}
);
}
install() {
// npm Install all dependencies 
this.npmInstall();
}
};
 Copy code 

3、 ... and 、 Release

After the above configuration is completed , It's ready to be released .

1、 Before official release , Test locally first

Make sure our command line is in the current scaffold project directory , Then type the command :

npm link
# If you want to remove use npm unlink
 Copy code 

This command can link our current scaffold project to the global node_modules in , Then we create a new folder demo, Enter this directory , Enter the following command :

yo jeyson-koa
# yo your-project That is, the name of the scaffold set above , Without the front generator-
 Copy code 

Execute the command , It's going to take the whole picture node_modules Find the scaffold project linked before in , Then in the present demo Under the path , Carry out the project , You can build your project .

image-20210221223423282

Run the project , Test for proper operation .

2、 Publish project scaffolding to npm Warehouse

After the local test is complete , You can publish it to npm In the online warehouse .

First of all, you need to register for npm account number , Then log in on the command line :

npm login
 Copy code 

And then into the scaffolding project , Use command :

npm publish
 Copy code 

notes : Before release , Need to confirm scaffold project package.json Medium version I want to give you a 1.0.0 Version above .

After publishing successfully , Can be in npm I found this bag on the official website , In this way, the scaffold can be downloaded and used anywhere , Such as :

# Global scaffolding project 
npm install -g generator-jeyson-koa
# adopt yo Command to run scaffolding 
yo jeyson-koa
 Copy code 
版权声明
本文为[A fish with a blade]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222134322231x.html

  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization