如何通过Vite的rollupOptions指定单JS文件的输入输出路径？

问题描述 #

需求：将src目录下的demo.js单独打包至build文件夹，命名为bundle.js，且需包含该文件的所有导入依赖。

当前问题：现有Vite配置运行后仅输出main.js和图片到dist目录，未生成目标文件。

已尝试的方案：

• outDir：仅能修改整体输出目录，无法实现单个文件的指定打包
• root：可变更输入文件，但要求该文件关联index HTML，不符合“单独打包带依赖的JS文件”的需求
• 单独使用Rollup配置已成功实现，但希望通过Vite自身配置达成目标

现有配置代码：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  rollupOptions: {
    input: 'src/demo.js',
    output: {
      file: 'build/bundles.js',
      format: 'cjs'
    },
    // plugins: [
    //   resolve(),
    //   babel({ babelHelpers: 'bundled' })
    // ]
  }
})

解决方案 #

可以通过Vite自身配置实现，核心是覆盖Vite默认的HTML入口构建行为，以下提供两种可行方案：

方案一：使用Vite库模式（推荐） #

Vite的库模式专门用于打包单个JS文件（含依赖），配置简洁且符合官方设计：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'build', // 指定输出目录为build
    lib: {
      entry: 'src/demo.js', // 目标入口文件
      fileName: 'bundle', // 输出文件名（自动添加格式后缀，最终为bundle.js）
      formats: ['cjs'] // 输出格式为CommonJS
    },
    sourcemap: false, // 按需关闭sourcemap以减小文件体积
    rollupOptions: {
      // 若有不需要打包进文件的外部依赖，可在此配置，例如external: ['vue']
      // external: []
    }
  }
})

方案二：直接修改Rollup配置并禁用HTML入口 #

通过调整rollupOptions覆盖默认输入输出，同时移除Vite默认的HTML处理插件，避免生成多余文件：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'build',
    rollupOptions: {
      input: 'src/demo.js',
      output: {
        file: 'build/bundle.js',
        format: 'cjs'
      },
      // 移除Vite默认的HTML插件，阻止生成HTML相关输出
      plugins: (plugins) => plugins.filter(p => p.name !== 'vite:html')
    }
  }
})

验证 #

运行vite build命令后，build目录下将生成bundle.js，包含demo.js及其所有导入的依赖（未配置external的情况下）。

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