如何使用Vite将指定JavaScript文件分别打包为两个独立文件？

完全可以通过Vite实现这个需求，核心是利用Vite的多入口打包配置，具体操作如下：

步骤1：配置Vite打包规则 #

修改项目根目录下的vite.config.js（如果没有该文件则新建），添加多入口打包的Rollup配置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 定义两组打包入口，对应你需要合并的文件
      input: {
        public: [
          './src/owl.js',
          './src/swipper.js',
          './src/devil.js'
        ],
        main: [
          './src/jQuery.js',
          './src/manage.js',
          './src/business.js'
        ]
      },
      // 指定输出文件名格式
      output: {
        entryFileNames: '[name].min.js'
      }
    },
    // 生产环境默认开启代码压缩，如需自定义压缩工具可调整此选项
    minify: 'esbuild' // Vite默认值，也可替换为'terser'
  }
});

步骤2：执行打包命令 #

在终端运行生产环境打包命令：

npm run build

执行完成后，你会在默认的dist目录下看到两个打包产物：public.min.js和main.min.js，分别对应你指定的两组JS文件。

关键说明 #

• input对象中的每个key（public/main）对应最终输出文件的名称前缀，结合output.entryFileNames的规则生成最终文件名。
• 因为你的JS文件之间互不引用，Rollup会直接将每组的文件按顺序合并后压缩，不会有模块依赖问题。

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