为了偷懒！ 前端项目中的指令模板创建

前言

最近在工作之余打算写一个组件库训练一下自己的逻辑思维顺便练练ts, 主要的项目搭建是用的dumi，一键建站还是比较方便的，但是踩了不少坑, 然后每次我在写组件的时候发现，其实组件的文件结构基本都是一样的，就想着有没有什么办法偷懒，刚好公司内部有这么个东西, 我打开c端的package.json👇

这个指令输入之后是什么效果呢, 我模仿他的写法自己抄了一个，效果如下👇

具体实现流程

步骤 1 - 模板创建

在整个项目下新建的一个文件夹，层级就放在最高吧，然后往你的文件下下添加一个模板文件夹 + 一个模板执行脚本。如下：

命名什么的随意就行,等会在脚本里对应写上就行

步骤二 - 脚本代码

我这边贴上我自己的代码，大家仅供参考

/* eslint-disable max-len */

const readline = require('readline'); 
const path = require('path');
const fs = require('fs');
const copydir = require('copy-dir');
const getPath = (pathStr) => path.resolve(__dirname, pathStr);

// 读取控制台内容
const readSyncByRl = (tips) => {
  const newTips = tips || '> ';

  return new Promise((resolve) => {
    const rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout,
    });

    rl.question(newTips, (answer) => {
      rl.close();
      resolve(answer.trim());
    });
  });
};

// 创建模块(先判断模块是否存在)
const isModalFunc = (name) =>
  new Promise((resolve) => {
    let isNext = false;
    const namePath = getPath(`../src/components/${name}`,function(){
      console.log(
        '\x1B[34m%s\x1B[0m',
        `${name}重复判断...`,
      );
    });
    if (!fs.existsSync(namePath)) {
      fs.mkdirSync(namePath);
      isNext = true;
    }
    resolve(isNext);
  });

readSyncByRl('请输入组件中文名称（如：输入框）：').then((ChineseName) => {
  readSyncByRl(
    'Please enter the English name of the module（eg：Input）：',
  ).then((EnglishName) => {
    isModalFunc(EnglishName).then((isNext) => {
      if (isNext) {
        copydir(
          getPath('./temp'),
          getPath(`../src/components/${EnglishName}`),
          function(err){
            if (err) {
              console.log('\x1B[31m%s\x1B[0m', err);
            } else {
              fs.writeFileSync(
                getPath(`../src/components/${EnglishName}/README.md`),
                `# ${ChineseName}`,
              );
              fs.rename(
                getPath(`../src/components/${EnglishName}/index.md`),
                getPath(`../src/components/${EnglishName}/index.md`),
                function(){
                  console.log(
                    '\x1B[34m%s\x1B[0m',
                    `请稍等，${ChineseName}创建中..`,
                  );
                }
              );
              fs.rename(
                getPath(`../src/components/${EnglishName}/index.module.less`),
                getPath(`../src/components/${EnglishName}/index.module.less`),
                function(){
                  console.log(
                    '\x1B[34m%s\x1B[0m',
                    `请稍等，${ChineseName}创建中...`,
                  );
                }
              );
              fs.rename(
                getPath(`../src/components/${EnglishName}/index.tsx`),
                getPath(`../src/components/${EnglishName}/index.tsx`),
                function(){
                  console.log(
                    '\x1B[34m%s\x1B[0m',
                    `请稍等，${ChineseName}创建中....`,
                  );
                }
              );
              fs.rename(
                getPath(`../src/components/${EnglishName}/demo/demo1.tsx`),
                getPath(`../src/components/${EnglishName}/demo/demo1.tsx`),
                function(){
                  console.log(
                    '\x1B[34m%s\x1B[0m',
                    `请稍等，${ChineseName}创建中.....`,
                  );
                }
              );
              fs.rename(
                getPath(`../src/components/${EnglishName}/demo/demo.module.less`),
                getPath(`../src/components/${EnglishName}/demo/demo.module.less`),
                function(){
                  console.log(
                    '\x1B[34m%s\x1B[0m',
                    `请稍等，${ChineseName}创建中......`,
                  );
                }
              );

              console.log(
                '\x1B[34m%s\x1B[0m',
                `恭喜您，${ChineseName}创建成功`,
              );
            }
          },
        );
      } else {
        console.log(
          '\x1B[31m%s\x1B[0m',
          `对不起，创建失败。${ChineseName}模块已经存在！`,
        );
      }
    });
  });
});

这里面主要的逻辑就是读取控制台输入的内容，也就是你的组件名称然后通过node的rename把文件名更改一下，这里贴一下rename的参数

参数很简单(旧文件路径，新文件路径，回调)，上述代码新旧路径是没有变化，有需要的可以调整，然后你就可以在项目里面快乐的创建模板了

🍃infiniteUI（开发中）地址

JeasonLoop/infinite-UI (github.com)

代码在这里面 可以拉取自提，虽然还没开发完但是可以点个star吗啊哈哈哈哈哈