Vite配置rollupOptions后打包生成Hello.js为空问题求助

问题根源 #

你在vite.config.js中手动指定Rollup的入口为Hello.ts，但该文件仅导出Hello类，没有任何执行逻辑。Rollup的tree-shaking机制会自动移除未被使用的导出代码，导致最终生成的Hello.js为空。此外，Vite默认以HTML文件作为构建入口，你替换为TS文件后，丢失了原本HTML中实例化Hello的关键逻辑，这才是核心问题。

解决方案 #

方案一：保留HTML作为入口（推荐） #

保持Vite以HTML为入口的设计模式，仅修改输出配置来实现自定义目录和无哈希文件名的需求：

修改vite.config.js：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    sourcemap: true,
    outDir: '', // 自定义输出目录（这里设为项目根目录）
    assetsDir: '',
    rollupOptions: {
      output: {
        entryFileNames: "[name].js", // 输出不带哈希的入口文件名
        chunkFileNames: "[name].js", // 代码块文件名同理
        assetFileNames: "[name].[ext]" // 静态资源文件名同理
      }
    }
  }
});

同时调整tsconfig.json的include字段，确保Hello.ts被TypeScript检测到（如果你的文件不在src目录下）：

{
  "include": [
    "src",
    "Hello.ts"
  ]
}

方案二：以TS文件为入口（不推荐） #

如果坚持要用Hello.ts作为入口，需要在文件末尾添加执行代码，避免被tree-shaking移除：

export class Hello {
    constructor() {
        console.log('hello');
    }
}

// 添加实例化代码，触发类的执行
new Hello();

此时HTML中的实例化代码可以移除，因为入口文件已经包含执行逻辑。

为什么禁用rollupOptions后打包正常？ #

禁用自定义rollupOptions后，Vite默认以index.html为入口，会自动解析HTML中的脚本依赖，包含了实例化Hello的代码，Rollup识别到该类被实际使用，因此不会被tree-shaking移除，最终打包结果正常。

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