Vite构建配置报错：如何生成指定名称的单JS打包文件？

错误原因 #

你当前的配置存在冲突：Vite的lib模式默认将输出目录设为dist，而你在rollupOptions.output里设置了file: "foo"，这会让Rollup试图直接生成名为foo的文件，和Vite默认的output.dir（dist）规则冲突，因此触发报错。

可行配置方案 #

要在dist文件夹生成包含所有依赖、指定名称的单JS文件，只需调整输出文件名的配置方式，同时确保关闭代码分割，避免生成额外chunk：

方案1：通过lib.fileName指定文件名

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/scripts/foo.ts'),
      name: 'foo',
      formats: ['es'],
      fileName: () => 'foo.js', // 直接指定输出文件名
    },
    rollupOptions: {
      output: {
        inlineDynamicImports: true, // 内联动态导入的代码
        manualChunks: undefined, // 强制关闭代码分割，确保单文件输出
      },
    },
    cssCodeSplit: false, // 可选：如果项目包含CSS，将其打包到JS中（否则会生成单独的CSS文件）
  },
});

方案2：通过rollupOptions.output.filename指定文件名

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/scripts/foo.ts'),
      name: 'foo',
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        filename: 'foo.js', // 指定输出文件名
        inlineDynamicImports: true,
        manualChunks: undefined,
      },
    },
    cssCodeSplit: false,
  },
});

验证 #

执行vite build命令后，dist目录下会生成foo.js文件，该文件包含所有依赖代码，完全符合你的需求。

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