为 vite 项目自动添加 eslint 和 prettier

好大猫
271 阅读1分钟

这个包很简单， 只是为 vite 项目自动添加 eslint 和 prettier

思考

如果是添加某种功能的话，一般情况下是不断的写入代码到指定文件，如果没有文件，会创建文件，然后不断的写入。

graph TB
  init[run]
  执行2[/获得文件类型/]
  判断1[判断文件类型==vue]
  判断2[判断文件类型==vue.ts]
  
  执行vue合并文件[commonPackages合并 vue.js模板]
  执行vue-ts合并文件[commonPackages合并 vue.ts模板]
  执行对应的npm或者yarn[/执行对应的命令/]
      判断3[npm install --save-dev]
      判断4[yarn add --dev]
  文件写入[writeFileSync]  
   
   
  初始化[main.js] --> init
  init--> 执行2
  执行2--Y--> 判断1
  执行2--N--> 判断2
  判断1-->执行vue合并文件
  判断2-->执行vue-ts合并文件
  执行vue合并文件-->执行对应的npm或者yarn
  执行vue-ts合并文件-->执行对应的npm或者yarn
  执行对应的npm或者yarn --npm-->判断3
  执行对应的npm或者yarn --yarn-->判断4
  判断3-->文件写入
  判断4-->文件写入

通过 package.json 找到对应的入口文件 main.js

main.js只有一个方法 run; 执行 run run.js

1. 执行 askForProjectType 获取对应的参数(projectType-> vue/vue-ts,或者packageManager -> npm / yarn )

  • askForProjectType
 function askForProjectType() {
  return enquirer.prompt([
    {
      type: 'select',
      name: 'projectType',
      message: 'What type of project do you have?',
      choices: getOptions(),
    },
    {
      type: 'select',
      name: 'packageManager',
      message: 'What package manager do you use?',
      choices: ['npm', 'yarn'],
    },
  ]);
}

2. 根据 上一步获取的参数 进行获取对应的本地文件和与本地合并文件

askForProjectType() -> projectType,packageManager (返回值)

eg:projectType=vue
import ./templates/vue.js 文件

const { packages, eslintOverrides } = await import(
    `./templates/${projectType}.js`
  );
  // 合并文件
 const packageList = [...commonPackages, ...packages];

packages = ['vue-eslint-parser', 'eslint-plugin-vue']
commonPackages = [
  'eslint',
  'prettier',
  'eslint-plugin-prettier',
  'eslint-config-prettier',
  'vite-plugin-eslint',
]

同理 合并 eslintConfigOverrides 和 eslint

3. 通过 packageManager 获取对应的执行命令

const commandMap = {
    npm: `npm install --save-dev ${packageList.join(' ')}`,
    yarn: `yarn add --dev ${packageList.join(' ')}`,
  };
const installCommand = commandMap[packageManager];

4. 找到 projectType来判断文件类型，并且 通过 babel/core 获取语法

const projectDirectory = process.cwd();// 获取当前的文件夹
const viteJs = path.join(projectDirectory, 'vite.config.js');
const viteTs = path.join(projectDirectory, 'vite.config.ts');

const viteMap = {
    vue: viteJs,
    react: viteJs,
    'vue-ts': viteTs,
    'react-ts': viteTs,
  };
  const viteFile = viteMap[projectType];
  //  找到对应的 viteFile 路径 并且插入
  // import eslintPlugin from 'vite-plugin-eslint';
  const viteConfig = viteEslint(fs.readFileSync(viteFile, 'utf8'));

5. 执行对应的 command 命令

exec(`${commandMap[packageManager]}`, { cwd: projectDirectory },error=>{
    if (error) {
          spinner.error({
            text: chalk.bold.red('Failed to install packages!'),
            mark: '✖',
          });
          console.error(error);
          return;
}

6. 写入文件

 fs.writeFileSync(eslintFile, JSON.stringify(eslint, null, 2));
 xxx

感悟

  1. 了解并认识了下面的这些包的用法

    • chalk ( 字体加粗 )
    • gradient ( 彩色字体)
    • nanospinner ( 旋转的小图标 )
    • child_process ( 执行 npm 或者 yarn)
    • enquirer (可以获取用户对某个问题的答案)

  2. 学会使用 await 动态引入本地文件

const { packages, eslintOverrides } = await import(
    `./templates/${projectType}.js`
  );
  1. 学会了 使用 MD的流程图

time:2022/7/3 21:12

avatar
文章
阅读
粉丝