1.首先安装node,查看node版本
node -V
2.查看npm的版本
npm -V
3.创建模板文件,里面是自己需要的文件,这里是在vue项目中添加的功能,如图
4.重要代码写在nodeCreate.js 中
(1)需要先安装对应的依赖
// gulpjs是一个前端构建工具,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。
npm install gulp -S
// 文件重命名
npm install gulp-rename -S
// gulp-replace这是一款gulp3的字符串替换插件
npm install gulp-replace -S
// Inquirer 是常规交互式命令行用户接口的集合,提供给 Node.js 一个方便嵌入,漂亮的命令行接口
npm install inquirer -S
(2)导入安装好的依赖以及需要的nodejs模块
const gulp = require('gulp');
const inquirer = require('inquirer');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const fs = require('fs'); // 导入文件系统模块(fs)语法
const path = require('path'); // path 模块提供了一些用于处理文件路径的小工具
// child_process 模块提供了以与 popen(3) 类似但不完全相同的方式衍生子进程的能力
const child_process = require('child_process');
(3)先定好询问开发者创建模块信息,可以根据需要添加
let queryPageInfo = async () => {
let answer2 = await inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'please input page\'s name ?',
validate(input) {
return Boolean(input);
},
},
{
type: 'input',
name: 'desc',
message: 'please input page\'s description ?',
validate(input) {
return Boolean(input);
},
},
]);
return Object.assign({}, answer2);
};
(4)开始创建文件
let createModule = async info => new Promise((resolve, reject) => {
console.log(info, '------>>>>>');
// path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
let dest = path.resolve(`src/view/${info.name}`);
// child_process.exec()完成后将 stdout 和 stderr 传给回调函数, child_process.exec()的同步版本,其将阻塞 Node.js 事件循环
child_process.execSync(`mkdir -p ${dest}`);
// 开始创建
gulp.src([
// 正常文件
`${__dirname}/template/**/*`,
])
// 替换模板内容
.pipe(replace('{{name}}', info.name))
.pipe(replace('{{className}}', info.name.replace(/_/g, '-')))
.pipe(replace('{{desc}}', info.desc))
.pipe(rename(path => {
// 只修改文件名
if (path.extname) {
path.basename = info.name;
}
}))
.pipe(gulp.dest(dest))
.on('end', () => {
// 提示
console.log(`>>> [${info.name}]文件夹创建完毕,结果在[${dest}]/*中查看`);
resolve();
});
});
(5)执行上述方法
// 入口函数
let main = async () => {
let moduleInfo = await queryPageInfo();
await createModule(moduleInfo);
console.log('全部创建任务执行完毕');
};
main().then();
(6)使用node运行,创建新文件
node nodeCreate.js
(7)如果在vue项目中使用还可以在创建文件的时候,把创建的文件,在路由里添加
let registNewRoute = async (answer) => {
let routePath = `${path.resolve('')}/src/router/index.ts`;
// 在路由文件里添加这句话,代表如果有这个的话就可以添加最新创建的文件路由,保持新创建的文件路由信息在最后
let routeTag = `// add new route ..`;
let routeTel = `{
path: '/${answer.name}',
component: () => import('../view/${answer.name}/${answer.name}.vue'),
},
${routeTag}`
// 异步写入文件内容
fs.writeFileSync(routePath, fs.readFileSync(routePath, 'utf8').replace(routeTag, routeTel));
}
(8)在Vue项目里的启动方式,可以在package.json里配置
"scripts": {
"dev": "vite",
"build": "vite build",
"create": "node ./src/create/nodeCreate.js" // npm run create,创建新文件
},
(9)输入npm run create,看效果
最后,小功能就写好了。