Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.
In everyday development, we encounter situations where every time we develop a new module, we need to manually create a file and add the default content to it. Especially in component library development, you need to create multiple files at once.
Today, recommend an automatic file module tool PLOP, through the form of command, can quickly generate the module we need, great convenience for our development.
The installation
Plop can be installed globally or in a project. In this case, it is installed in a project
pnpm i plop -D
Copy the codeAfter the installation, add the run command to the script of package.json. Since we did not create the plopfile.js file in the root directory, we need to respecify the file path.
"p": "plop --plopfile ./plop/generator/create-module.js"
Copy the codeThe configuration template
Assume that our current directory structure is as follows
It takes the form of multiple pages, each page has three types of files, HTML, javaScript, CSS, and some default content
html
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Test</title>
</head>
<body>
<div class="test">
test.html
</div>
</body>
</html>
Copy the codejavaScript
import './test.less'
Copy the codeless
@import '@/assets/fonts/iconfont.css';
Copy the codeNext we need to configure plop to help us create the base template
First create a plop directory under the root directory for our template configuration code, create generator and template directories under plop, generator for the ploP generated file template code, and template for the template code.
Next create the create-module.js file under generator and add the following code
// Uppercase
const toUpperCase = (str) = > str.charAt(0).toUpperCase() + str.slice(1)
module.exports = function (plop) {
plop.setGenerator('createModule', {
/ / hint
description: 'Create a module'.// Option step
prompts: [{type: 'input'.name: 'moduleName'.message: 'Please enter module name'}].actions: function (data) {
// Data can take the name field in all prompts, which are the parameters entered or selected by all steps
const { moduleName } = data
// Uppercase
const upperFirstName = toUpperCase(moduleName)
const actions = []
if (moduleName) {
actions.push(
{
// New type
type: 'add'.// Save path
path: `.. /.. /src/views/${moduleName}/${moduleName}.html`.// Which template to use
templateFile: '.. /template/create-module-html.hbs'.// Arguments can be passed
data: {
moduleName,
upperFirstName
}
},
{
// New type
type: 'add'.// Save path
path: `.. /.. /src/views/${moduleName}/${moduleName}.js`.// Which template to use
templateFile: '.. /template/create-module-js.hbs'.// Arguments can be passed
data: {
moduleName
}
},
{
// New type
type: 'add'.// Save path
path: `.. /.. /src/views/${moduleName}/${moduleName}.less`.// Which template to use
templateFile: '.. /template/create-module-less.hbs'})}return actions
}
})
}
Copy the codeOnce we’ve created the execution code, we need to create the template code, so we add the template directory in plop, Create create-module-html. HBS, create-module-js. HBS, create-module-less-hbs, and add the following code
create-module-html.hbs
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>{{ upperFirstName }}</title>
</head>
<body>
<div class="test">
{{ moduleName }}.html
</div>
</body>
</html>
Copy the codecreate-module-js.hbs
import './{{ moduleName }}.less'
Copy the codecreate-module-less.hbs
@import '@/assets/fonts/iconfont.css';
Copy the codeAt this point, our plop configuration is complete, so try running the PNPM run p command, which you’ll see on the console
Then enter the name of the module to create, such as mian
After the above prompts, we can see the main module created in SRC /views, and the file contents in the main module have the initial content.
conclusion
Plop greatly improves our development efficiency, especially when modules have more initial files, the effect will be more obvious, reducing the probability of manual error.
For more configurations, see the official ploP documentation
If you are interested in ploP configuration in this article, try pulling code yourself, project Demo