自定义脚手架

记录最近学到的，使用自定义模板实现简单的脚手架功能

  • 自定义一个文件夹（我定义的名字叫做sample-scaffolding)，打开对应终端，初始化npm，即npm init,  根据你的需求输入name, version, license...信息，生成package.json
  • 在package.json中添加bin字段，属性值为"cli.js"，如下图


  • 在package.json同级目录下新建cli.js文件，文件头为
  • #!/usr/bin/env node

// 设置环境变量的 文件头

     

  • 引入inquirer 包 
    npm i inquirer

    因为我们还用到了ejs, 所以引入ejs 

    npm i ejs

     

  • package.json中就有这俩包
  • 这是我的package.jsonView Code

  •  cli.js

 1 #!/usr/bin/env node
 2 
 3 // 设置环境变量的 文件头
 4 
 5 const inquirer = require("inquirer");
 6 const path = require("path");
 7 const fs = require("fs");
 8 const ejs = require("ejs");
 9 
10 inquirer
11   .prompt([
12     {
13       type: "input",
14       name: "name",
15       message: "project name is ",
16     },
17   ])
18   .then((answers) => {
19     // Use user feedback for... whatever!!
20     // console.log(answers);
21     // 模板目录
22     const tmlDir = path.join(__dirname, "templates");
23     // 目标目录
24     const destDir = process.cwd();
25     // 读取模板文件,将模板下的文件全部转换到目标目录
26     fs.readdir(tmlDir, (err, files) => {
27       if (err) throw err;
28       files.forEach((file) => {
29         // console.log(file);
30         // 通过模板引擎渲染文件
31         ejs.renderFile(path.join(tmlDir, file), answers, (error, result) => {
32           if (error) throw error;
33           // console.log(result)
34           // 将结果写入模板
35           fs.writeFileSync(path.join(destDir, file), result);
36         });
37       });
38     });
39   })
40   .catch((error) => {
41     // Something else went wrong
42     throw error;
43   });
View Code

generator方式需要的模板都放在package.json同级的templates文件夹下

如图为我的目录

这是Index.html（title位置和body中的div 是给模板预留的位置）

 

这是index.css

1 body {
2   margin: 0;
3   background-color: gray;
4 }
View Code

 

 

 

 

 然后执行关联npm   

npm link

 

测试

新建test文件夹（mkdir test)

 

 

 切换到新建的文件夹，执行我前面命名的命令sample-scaffolding，红线是用户输入

 

 

然后在test文件夹下就生成了两个文件，在index.html中title位置和body中的div 已经被用户输入的内容填充了

 

posted @ 2021-04-26 20:52  芋圆小宝  阅读(233)  评论(0)    收藏  举报