如何在Vite中使用TypeScript Namespace并确保其被打包

问题根源在于Vite基于ES模块机制，你使用的/// <reference path="./Test.ts" />只是TypeScript的类型引用指令，仅用于类型检查，不会被Vite/Rollup识别为实际的模块依赖，因此打包时会忽略Test.ts。

以下是两种可行的解决方式：

方式一：改用ES模块导入（推荐） #

将代码转换为标准ES模块格式，让Vite自动识别依赖：

修改Test.ts为模块导出：

// Test.ts
export namespace Test {
  export const a = 123;
}

修改main.ts使用import导入：

// main.ts
import { Test } from './Test.ts';
console.log(Test.a);

这种方式符合现代模块化规范，打包工具会自动处理依赖关系，确保Test被包含在产物中。

方式二：兼容旧代码（保留全局命名空间） #

如果必须保留全局命名空间和三斜线引用，可通过以下两种方式强制Vite打包Test.ts：

1. 在main.ts中添加手动导入 #

即使保留三斜线引用，也要添加import语句明确声明依赖：

// main.ts
import './Test.ts';
/// <reference path="./Test.ts" />
console.log(Test.a);

2. 通过Vite配置强制包含文件 #

在vite.config.ts中配置Rollup的入口选项，将Test.ts纳入打包范围：

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

export default defineConfig({
  plugins: [typescript()],
  build: {
    rollupOptions: {
      input: ['./main.ts', './Test.ts'],
      // 可选：合并所有代码到一个文件，避免多chunk
      output: {
        manualChunks: undefined
      }
    }
  }
});

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