Vite+TypeScript构建中const enum未被内联的问题求助

问题描述 #

使用Vite默认配置构建项目时，跨文件导入的const enum未被内联为具体数值，而是被编译成了普通枚举对象。

示例代码 #

types.ts

export const enum TestConstEnum {
  Test1,
  Test2,
  Test3,
}

test.ts

import { TestConstEnum } from "./types";

export function test() {
  console.log(TestConstEnum.Test1, TestConstEnum.Test2);
}

实际编译产物 #

var r = /* @__PURE__ */ ((e) => (e[e.Test1 = 0] = "Test1", e[e.Test2 = 1] = "Test2", e[e.Test3 = 2] = "Test3", e))(r || {});
function t() {
  console.log(r.Test1, r.Test2);
}
export {
  t as test
};

期望编译产物 #

function t() {
  console.log(0, 1);
}
export {
  t as test
};

所用tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true
  },
  "include": ["src", "lib"]
}

注：同一文件内定义的const enum可正常内联；尝试设置"isolatedModules": false后问题依旧。

问题根源 #

Vite默认使用esbuild编译TypeScript，而esbuild采用单文件编译策略，无法跨文件解析const enum的具体数值，因此会将导入的const enum降级为普通枚举对象。仅修改tsconfig的isolatedModules无法生效，因为esbuild的默认配置未同步更新。

解决方案 #

方案1：配置esbuild强制内联跨文件const enum #

在vite.config.ts中覆盖esbuild的TypeScript配置，明确关闭isolatedModules并禁用枚举对象保留：

import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        isolatedModules: false,
        preserveConstEnums: false // 确保不生成枚举对象代码，完全内联数值
      }
    }
  }
});

方案2：改用tsc编译TypeScript（完全对齐TS规范） #

若需要严格遵循TypeScript编译器的行为，可禁用esbuild对TS的处理，改用Rollup的TypeScript插件：

1. 安装依赖：

npm install @rollup/plugin-typescript typescript --save-dev

2. 修改vite.config.ts：

import { defineConfig } from 'vite';
import typescript from '@rollup/plugin-typescript';

export default defineConfig({
  plugins: [typescript({
    tsconfig: './tsconfig.json',
    compilerOptions: {
      preserveConstEnums: false
    }
  })],
  esbuild: {
    exclude: /\.ts$/ // 让Rollup插件处理TS文件
  }
});

验证结果 #

修改配置后重新执行vite build，产物会符合期望，const enum的数值被直接内联到代码中。

额外注意事项 #

• 若const enum定义在.d.ts声明文件中，esbuild默认会自动内联其值，无需额外配置。
• preserveConstEnums设为true时，即使数值被内联，编译产物仍会保留枚举对象的定义；设为false则完全移除枚举对象代码。

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