如何通过Vite将React应用加载并构建到作用域对象下避免全局污染

要实现类似Webpack globalObject的效果，Vite需要通过配置Rollup的输出选项完成（Vite底层基于Rollup构建），具体步骤如下：

1. 修改Vite配置文件
   在vite.config.js或vite.config.ts中，配置build.rollupOptions.output指定自定义全局对象，并映射React相关依赖：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     // 开发环境全局变量映射
     define: {
       'window.React': 'window.MY_APP.React',
       'window.ReactDOM': 'window.MY_APP.ReactDOM'
     },
     build: {
       rollupOptions: {
         output: {
           // 指定模块挂载的全局对象名称
           name: 'MY_APP',
           // 将第三方依赖映射到自定义对象的属性上
           globals: {
             react: 'MY_APP.React',
             'react-dom': 'MY_APP.ReactDOM'
           },
           // 在打包产物开头插入代码，确保window.MY_APP存在
           intro: 'this.MY_APP = this.MY_APP || {};'
         }
       }
     }
   })
   

2. 处理React依赖的全局挂载

   • 如果是外部引入React的UMD包：在入口HTML中先加载React，再将其转移到window.MY_APP并清理全局属性：

     <script src="react.production.min.js"></script>
     <script src="react-dom.production.min.js"></script>
     <script>
       window.MY_APP = {
         React: window.React,
         ReactDOM: window.ReactDOM
       };
       delete window.React;
       delete window.ReactDOM;
     </script>
     <script type="module" src="/src/main.jsx"></script>
     

   • 如果将React打包进自身bundle：Rollup会自动将React相关代码挂载到window.MY_APP下，无需额外处理。

3. 验证效果
   打包或运行项目后，检查全局对象，React相关属性只会出现在window.MY_APP中，不会直接污染window全局空间。

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