如何在Vite中打包非模块化的旧原生JS文件

1. 梳理全局脚本的执行顺序 #

先理清这50个非模块化JS的依赖关系（比如哪个脚本先定义window.App，哪些脚本依赖这个全局对象），按正确执行顺序创建一个入口文件来统一引入：

// src/global-scripts.js
// 严格按照依赖顺序引入所有全局脚本
import './vendor/script-define-app.js'
import './vendor/script-modify-app.js'
import './vendor/script-global-class-a.js'
// ... 剩余的全局脚本

2. 配置Vite打包规则 #

修改vite.config.js，确保全局脚本被打包进主chunk且位于代码最顶部，同时禁用代码拆分以合并所有文件：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      // 将全局脚本入口与主应用入口合并，保证全局脚本先执行
      input: {
        main: ['src/global-scripts.js', 'src/main.js']
      },
      // 强制所有代码打包到单个chunk，避免自动拆分
      manualChunks: () => 'index',
      output: {
        // 生成带哈希的文件名，解决缓存问题
        entryFileNames: 'index-[hash].js',
        // 使用IIFE格式，更适配全局变量场景
        format: 'iife'
      }
    },
    // 确保生产环境压缩代码（Vite默认开启，此处显式确认）
    minify: 'terser'
  }
})

3. 开发环境的加载配置 #

在index.html中按顺序引入两个入口文件，保证开发模式下全局脚本先于应用代码执行：

<!-- index.html -->
<script type="module" src="/src/global-scripts.js"></script>
<script type="module" src="/src/main.js"></script>

方案优势 #

• 零侵入原有代码：无需修改50个非模块化JS的内容，直接通过统一入口引入即可。
• 合并请求：所有代码打包为单个文件，大幅减少HTTP请求数。
• 缓存自动失效：文件名带哈希值，代码更新时哈希自动变更，无需手动处理缓存。
• 自动压缩：Vite生产环境会自动压缩代码，也可通过build.minify切换压缩工具（如esbuild）。

特殊场景处理 #

如果部分脚本存在全局变量冲突或特殊执行逻辑，可使用@rollup/plugin-inject插件辅助注入全局变量，但绝大多数场景下上述方案已足够：

// vite.config.js
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    inject({
      // 将window.App注入到需要的模块中（按需使用）
      App: ['window', 'App']
    })
  ]
})

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