Original intention: In order to reduce CTRL + C, CTRL + V operations, save a few minutes to fish. (Fishing is actually watching the Nuggets learn how to share)

What kind of code does ** want to generate? ** Generate files and folders in the format shown below, and dynamically change the contents of the files

Thinking: With this purpose in mind, I went through various documents and found that the idea of building a scaffold from zero was a good fit for my code generator. General scaffolding construction is:

  1. First the user enters a command on the console
  2. The user’s conditions are stored in q&A mode
  3. Waiting for loading
  4. completed

While looking at all kinds of information, I found several plug-ins suitable for me

  • Chalk Color processor (adds favorite colors to text output from the console)

  • Inquirer command line interaction tool (ask questions and save answers)

  • Fs-extra file processing (fs can be used, no installation required)

  • Ora progress beautification (beautify the loading style while the program is executing)

After completing my own code generator, I was not content with that, but thought about the opportunity to scaffolding my own project and store my knowledge. Common plug-ins are also listed here

  • ** Commander ** Command line processing (can define various commands to perform different command processing)

  • ** git-repo**

  • ** Cross-spawn ** Cross-platform command execution (download various plug-ins)

* * * * * * * * * * * * * * * * * * * * * * * * to knock knock code * * * * * * * * * * * * * * * * * * * * * * * * * *

Prepare an empty folder: auto-generate-code

Execute NPM init to get the package.json file

Add a new folder and file bin index.js

What can I output by executing node bin/index.js on the console?

How to execute the node bin/index.js directive globally using a single command.

Add “bin” to package.json file: {“agc”: “bin/index.js”},(key-value pair) (😊)

The command cannot be found after the agC is executed. NPM link is required

Package linking is a two-step process.

First, npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/<package> that links to the package where the npm link command was executed. (see [npm-config](https://www.npmjs.cn/misc/config) for the value of prefix). It will also link any bins in the package to {prefix}/bin/{name}.

Next, in some other location, npm link package-name will create a symbolic link from globally-installed package-name to node_modules/ of the current folder.

Above 👆 complete a local project directly input command: agc, complete node bin/index.js command (also only my lazy use), if you need to let everyone can use, can be placed on the NPM.

Dry goods code

NPM install Chalk inquirer fs-extra ora –save

  • Question and answer

Use the Inquirer plugin

So let’s do it

To see what configurations Inquirer provides, please go to 👉 Inquirer here

  • Color processing

Using the Chalk plugin

perform

To learn what Chalk offers, go to 👉 Chalk here

  • Generate files and folders

Use the fs/ Fs-extra plugin

Create aa folder under code. In this way, generate XXX/API, XXX /ds, XXX /router, XXX/Store, XXX /views

To see what fs-extra provides, please go to 👉 fs-extra here

  • Beautify loading

Use ora

Let’s see what happens

To see what configuration ORA provides, click here at 👉 ORA

With these four plug-ins, I can accomplish what I want to achieve. Next, I will generate dynamic file content based on the template file.

We can find out from the analysis of file directories and files:

  1. The API folder stores the address information of the calling interface
  2. The DS folder stores data information
  3. The Router folder stores routing information
  4. The Store folder stores status information
  5. The View folder stores page information

We need to generate page code based on the functionality, so creating five templates is a good idea.

Add a new template file template.js, I use ES6 new feature ‘ ‘string template here, the input parameter judgment concatenate string return.

Added file generation logic

The above function completes automatic code generation by entering a command. If there’s a lot of repetition on the page but you can judge the code by the conditions. Using a question-and-answer approach, getting the required conditions, and dynamically generating code can save a lot of time.

Through the learning process of wanting to be lazy, I learned a lot of knowledge.

expand

In the process of starting, we will supplement our own shortcomings by constantly looking up information. Only by ourselves can we write and add our own ideas, so that what we learn will be helpful to us.