In the second half of 20 years, I have done a lot of B-side projects, most of which are data display pages. Such a process is really boring and boring, and the full stack leaders responsible for the related projects and I, the front-end food force, are also “tortured”. Although they are all CTRL C+V functions, they are unbearable.

To solve the direction

After the transformation of the company’s technology stack from Vue to React, the attention of the background management page project also shifted from the Pro Admin direction of Vue series UI library to Umi and Ant Pro

In line with the idea of writing less code, I began to play the idea of generating code. After all, it is good to have more time for fishing and give myself more opportunities to improve my ability

Thanks to the Umi Ui visual programming AIDS, our extensive C+V functionality can also be written as a script similar to one-click generation code

Because it is for personal use, mainly to record this kind of thinking, so there is not too much cumbersome logic and boundary judgment, the whole process is very fast, PA just a good ~

This article is only suitable for a large number of pages with the same logic, and a large number of pages with different logic are not suitable for pairing up.Copy the code

The directory structure

| - result | - template | -- index. Js | -- index. Js / / * result to place the template is used to generate results folder / / * placed need to generate a template file / / * Template /index.js for example // * index entry fileCopy the code

What can we use with Node?

Mainly using node fs module, we need to use the API:

  • Access Tests user permissions on files or directories specified by path
  • Readdir Reads the contents of a directory
  • Mkdir Creates directories asynchronously
  • ReadFile asynchronously reads the entire contents of a file
  • WriteFile asynchronously writes data to a file and overwrites the file if it already exists
Data in writeFile can be a string or a buffer, which is importantCopy the code

Sticking up

Now that we’re done with the preparation, this is where we want to put the apis together

  • Use firstaccessThe function checks to see if our output/input directory exists or creates one for it
// * index.js const start = ({ sourceURL, targetURL, sourceData }) => fs.access(targetURL, Mkdir (targetURL, () => {copy({sourceURL, targetURL, sourceData}); (err) => {if (err) {// * Does not exist. }); } else {// * Already exists to copy copy({sourceURL, targetURL, sourceData}); }});Copy the code
  • Then perfectcopyfunction
// * index.js const copy = ({ sourceURL, targetURL, sourceData }) => fs.readdir(sourceURL, (err, Paths) => {// * Read directory if (err) {if (err. Code === 'ENOENT') {console.error(' source path does not exist '); return; } throw err; }; Paths. ForEach (path => {// * const _source = '${sourceURL}/${path}', _target = '${targetURL}/${path}'; Stat (_source, (err, st) => {if (err) {console.error(' target: fs.stat(_source, (err, st) => { ${_source} state: failed to read state '); return; } if (st.isfile ()) {fs.readfile (_source, 'utf8', (err, Data) => {// * Read file data if (err) {console.error(' target: ${_source} state: read failed '); return; } // * start the substitution -- // *code... // * Replace end -- //! Fs.writefile (_target, data, 'utf8', (err) => {if (err) {console.error(' target: ${_target} status: failed to write '); Console. log(' \u001b[42m biu \u001b[0m Target: \u001b[34m${_target}\u001b[0m status: \u001b[31m failed to write \u001b[0m ') return;} console.log(' \u001b[42m biu \u001b[0m Target: \u001b[34m${_target}\u001b[0m status: \u001b[32m write success \u001b[0m ')});});} else if (st.isdirectory ()) {// * Recursively call itself start({sourceURL: _source, targetURL: _target, sourceData, }) } }); }); });Copy the code

At this point, a basic file lookup/read/write is done, and the most important step is “how to replace template files with the files we need.”

Re – replace file contents

We can get the normal file information in the readFile function, and then we can replace the specified content with replace, completing the one-click generation of a large number of identical logical pages

// * index. Js // * Define the data we want to replace const sourceData = {btnTitle: 'TOP10',}; / /! Middle omit part repeat code... // * Replace start -- const {btnTitle} = sourceData; data = data.replace(/__btnTitle__/, JSON.stringify(btnTitle)); // * Replace end --Copy the code
// * template/index.js // * a lot of code omitted <Button>__btnTitle__</ButtonCopy the code

__btnTitle__ is a placeholder that needs to be used to replace data in a file. You can write it as much as you like, as long as it matches replace in index.js

After that, run node index.js to see the contents of the result folder and go to ✈✈✈

At this time, some people will say, you still need to configure the sourceDate, and there is no difference with C+V, don’t panic, at this time, you can talk to the backend boss, let him directly give you the corresponding page sourceDate, let him give you according to this format, save the time to write swagger, what? You say swagger is automatically generated, that also don’t panic, “the mine refresh, with the bell master take him to mine” 🤣, always know, or the background elder brother good we don’t have to write anything directly node it is good, or they will start to make sourceData

Script extension

The example above shows a very simple substitution function, In the development of a preset field can be a key to replace the [API interface /table Columns configuration/copy], or directly to the sourceURL/targetURL path to the actual project page to store the page is ok, as for the script generated file format is not good, this is easy to say, There’s esLint

The key is to see what you encounter in the work, can do, can’t do or honestly write