nodejs学习-通过命令创建新模板

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,看效果

 

 

最后，小功能就写好了。