手写 vite-plugin 在新建文件时自动使用模版代码

原创

永恒的财宝

修改于 2024-11-29 10:34:03

6570

文章开始之前，推荐一些别人写的很好的文章！感兴趣的也可以去读一下哦！

今日推荐：CSS 思考『CSS in JS』 or 『JS in CSS』 ?

文章链接：https://cloud.tencent.com/developer/article/2180464

这是个很好的命题，但作者写得稀烂。不过不妨碍我输出个人观点，首先国内响应式需求其实很低，其次私有化和外包化场景极多，所以高频的换样式换布局现象就不利于 tailwind css 这类样式实现方案，因此我更推崇 less mixins 搭配 css vars 这种模式。

在新部门做的是些运营类的管理后台的需求，就是表格表单的 CRUD。

可能来了个新需求，是回显下其他项目组的设备操作记录，于是 筛选项配置+表格配置+接口请求+按钮交互 还是这些玩意。

那么，考虑下自动化地完成这类 Ctrl+C 的工作就很合理了，思路如下：

准备各类型的模板代码(比如列表页/表单页/表单弹窗等)
监听文件被新建
用户手动选择模板代码类型
将模板代码拷贝至新建文件

准备模板代码

这块见仁见智各取所需了，我是以文件为蓝本的，比如 sources/list.vue 等。

监听文件变化

监听文件变化，用的是 chokidar 这个库，https://www.npmjs.com/package/chokidar

它的 API 都非常简单凝练，一看就懂。

import chokidar from 'chokidar';

// 监听本目录下所有 js 文件
const watcher = chokidar.watch('.', {
  ignored: (path, stats) => stats?.isFile() && !path.endsWith('.js'),
})

watcher
  .on('add', path => log(`File ${path} has been added`))
  .on('change', path => log(`File ${path} has been changed`))
  .on('unlink', path => log(`File ${path} has been removed`));

watcher
  .on('addDir', path => log(`Directory ${path} has been added`))
  .on('unlinkDir', path => log(`Directory ${path} has been removed`))

watcher
  .on('error', error => log(`Watcher error: ${error}`))
  .on('ready', () => log('Initial scan complete. Ready for changes'))

用户选择模板代码类型

获取用户输入，用的是 inquirer 这个库，https://www.npmjs.com/package/inquirer

此库文档稍复杂一点，但可以自己封装得更好理解一些。

import inquirer from 'inquirer';

// 用户在命令行输入 - 文本
export async function askText(title: string): Promise<string> {
  const params = [{ type: 'input', name: 'text', message: title }];
  const result = await inquirer.prompt(params);
  const { text } = result || {};
  return text;
}

// 用户在命令行输入 - 选择
export async function askChoice(title: string, choices: { value: any, name: string }[]): Promise<string> {
  const params = [{ type: 'list', name: 'choice', choices, message: title }];
  const result = await inquirer.prompt(params);
  const { choice } = result || {};
  return choice;
}

当然，你也可以不询问，根据新建文件所在的目录或文件名自动去判断模板类型。

拷贝模板代码

这就是简单的 fs 操作了，https://nodejs.cn/api/fs.html

const thisDir = path.dirname(fileURLToPath(import.meta.url));
const templateDirs = path.join(thisDir, 'sources');
const templateOptions = [
  { name: '[页面] 列表页模板', value: 'list' },
  { name: '[页面] 表单页模板', value: 'form' },
  { name: '[组件] 弹窗模板', value: 'dialog' },
];

export async function run(targetFilePath: string): void {
  const templateValue = askChoice('选择模版类型', templateOptions);
  if (!templateValue) return;

  try {
    const templateFilePath = path.join(templateDirs, `${templateValue}.vue`);
    const content = fs.readFileSync(templateFilePath, 'utf8');
    fs.writeFileSync(targetFilePath, content, 'utf8');
    console.log('模版生成完成，请切换文件查看');
  } catch (err) {
    console.erroe(err.message || '未知模版，生成失败');
  }
}

实现 vite-plugin

咱不可能每时每刻都把文件监听开启着，所以最好是仅开发 npm run dev 时开启。

你可以去写个 npm scripts 在 dev 脚本时一起运行，但 vite-plugin 我觉得是更好的方式。

另外，vite-plugin 自带 chokidar 是不需要引入的，使用 configureServer 函数的 server.watcher 即可。

import { run } from './src/when-page-file-create'

// vite-plugin-mine 入口
export default async function VitePluginMine(_options) {
  return {
    name: 'vite-project-mine',
    enforce: 'post',
    configureServer(server) {
      bindFileServerWatcher(server);
    },
  };
}

// 绑定文件监听
function bindFileServerWatcher(server) {
  // 新建文件时，询问模板代码类型，确认后自动使用模板代码
  server.watcher.on('add', (uri) => {
    // ... 此处还可加点路径、类型之类的判断，随你发挥
    run(uri);
  });
}

然后在 vite.config.ts 中去使用该 vite-plugin 即可。

import vue from '@vitejs/plugin-vue';
import VitePluginMine from './plugins/vite-plugin-mine';

export default (): UserConfig => {
  return {
    plugins: [
      vue(),
      VitePluginMine(),
    ],
  };
}