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:
- First the user enters a command on the console
- The user’s conditions are stored in q&A mode
- Waiting for loading
- 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 thenpm link
command was executed. (see[npm-config](https://www.npmjs.cn/misc/config)
for the value ofprefix
). 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-installedpackage-name
tonode_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:
- The API folder stores the address information of the calling interface
- The DS folder stores data information
- The Router folder stores routing information
- The Store folder stores status information
- 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.