说在前面
平时大家开发一个新项目或新模块的时候都是怎么开始的呢？有没有人是直接从已有项目或模块复制一份出来然后再删除掉一些冗余的代码？这样的话往往会产生很多的冗余代码，不利于项目的后续维护，那么我们可不可以像
vue create一样来快速新建一个我们自己的项目模板呢？
思路分析
我们可以直接在插件里面保存几个模板，后面新建的时候可以直接选择我们想要新建的模板，将选择了的模板直接复制到对应的项目目录下。
所以我们需要完成以下几项工作即可：
- 1、在插件中保存模板源码；
- 2、用户通过控制台交互选择新建的模板和新建的目录位置；
- 3、将用户选择的模板复制到选择的目录中。
实现步骤
1、在插件中保存模板源码
之前我也发布过一篇快速制作chrome浏览器插件的模板，这里我将这个模板拷贝一份到插件中。
2、用户通过控制台交互选择新建的模板和新建的目录位置
这里可以使用我之前封装过的一个控制台交互插件来实现，具体实现思路和代码可以看这篇文章：
- 1、获取模板目录
模板代码我们都放在了template目录下，我们直接获取template目录下的目录名即可：
const list = fs.readdirSync(__dirname + "/template");
- 2、选择创建位置
我们需要获取在控制台输入命令时所在的目录，可以使用 process.cwd() 方法来获取。
const baseDir = process.cwd();
- 3、通过
@jyeontu/j-inquirer实现控制台交互
交互配置代码如下：
const fs = require("fs");
const path = require("path");
const inquirer = require("@jyeontu/j-inquirer");
const list = fs.readdirSync(__dirname + "/template");
const baseDir = process.cwd();
const options = [
{
type: "list",
message: "请选择创建模版：",
name: "moduleName",
choices: list,
},
{
type: "folder",
message: "请选择创建位置：",
name: "folderName",
default: "",
dirname: baseDir,
},
];
执行交互：
const jModule = () => {
// 提示用户选择模板和创建目录
new inquirer(options).prompt().then((answers) => {
const { moduleName, folderName } = answers;
// 使用示例
const sourceDir = `${__dirname}/template/${moduleName}`;
const targetDir = folderName;
copyDirectory(sourceDir, targetDir);
console.log("模板已生成");
});
};
3、将用户选择的模板复制到选择的目录中
遍历模板目录文件，遇到普通文件的时候直接使用copyFileSync执行复制操作。遇到目录的时候，使用existsSync判断当前目录是否存在，不存在的新建mkdirSync文件夹，已存在则递归复制该目录下的文件，具体代码如下：
function copyDirectory(sourceDir, targetDir) {
if (!fs.existsSync(targetDir)) {
fs.mkdirSync(targetDir);
}
const files = fs.readdirSync(sourceDir);
files.forEach((file) => {
const sourcePath = path.join(sourceDir, file);
const targetPath = path.join(targetDir, file);
if (fs.statSync(sourcePath).isDirectory()) {
copyDirectory(sourcePath, targetPath);
} else {
fs.copyFileSync(sourcePath, targetPath);
}
});
}
4、将插件发布到npm
完善好package.json配置后，执行npm publish即可将插件发布到npm仓库中。
npm publish
插件地址
插件安装和使用
安装
npm i -g j-module-create
使用
j-module-create
执行命令后根据提示进行相应操作即可。
源码
联系作者
微信公众号：『前端也能这么有趣』
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
