如何让Vite在Dev/Build启动时将TS对象写入JSON文件

直接通过自定义Vite插件就能实现，利用Vite的生命周期钩子，在Dev服务启动或Build开始时自动执行写入逻辑，不用额外手动跑脚本。

具体步骤 #

1. 准备你的TS导出文件 #

假设你有个导出配置对象的TS文件，比如src/config/appConfig.ts：

export const appConfig = {
  appName: "My Vite Project",
  version: "2.1.0",
  env: import.meta.env.MODE,
  permissions: ["read", "write"]
};

2. 编写自定义Vite插件 #

在项目里创建scripts/exportConfigPlugin.ts（或者直接内嵌到vite.config.ts），核心逻辑是用esbuild转译TS文件，拿到导出对象后写入JSON：

import fs from "fs";
import path from "path";
import type { Plugin } from "vite";

export function exportConfigToJson(): Plugin {
  return {
    name: "vite-plugin-export-config",
    // Dev服务启动完成后执行
    configureServer() {
      writeConfig();
    },
    // Build流程开始时执行
    buildStart() {
      writeConfig();
    }
  };
}

function writeConfig() {
  // 用esbuild同步转译TS为Node可执行的JS
  const { buildSync } = require("esbuild");
  const buildResult = buildSync({
    entryPoints: [path.resolve(__dirname, "../src/config/appConfig.ts")],
    bundle: true,
    format: "cjs",
    write: false,
    platform: "node",
    // 注入环境变量（如果需要）
    define: {
      "import.meta.env.MODE": JSON.stringify(process.env.NODE_ENV || "development")
    }
  });

  // 执行转译后的代码，获取导出的配置对象
  const moduleExports = {};
  eval(buildResult.outputFiles[0].text)(moduleExports, require, { exports: moduleExports });
  const targetConfig = moduleExports.appConfig;

  // 写入到public/output.json
  const outputFilePath = path.resolve(__dirname, "../public/output.json");
  fs.writeFileSync(outputFilePath, JSON.stringify(targetConfig, null, 2), "utf-8");
  console.log(`✅ 配置已成功写入: ${outputFilePath}`);
}

3. 在Vite配置中注册插件 #

修改vite.config.ts，导入并启用这个插件：

import { defineConfig } from "vite";
import { exportConfigToJson } from "./scripts/exportConfigPlugin";

export default defineConfig({
  plugins: [exportConfigToJson()]
});

4. 验证效果 #

• 启动Dev服务：npm run dev，控制台会打印写入成功的日志，public/output.json会生成对应内容。
• 执行Build：npm run build，同样会自动生成JSON文件后再开始构建。

可选优化 #

• 如果需要监听TS配置文件的变化，自动重新写入JSON，可以在插件里添加watch钩子，监听目标TS文件，变化时调用writeConfig。
• 若不想用esbuild，也可以用ts-node通过子进程执行脚本，但esbuild是Vite自带依赖，无需额外安装，更轻量。

内容的提问来源于stack exchange，提问作者NewBee