如何正确打包依赖外部CDN React的Vite+React应用？

问题根源 #

你遇到的报错是因为生产构建后生成的ES模块代码中保留了import React from 'react'这类裸模块导入语句，而浏览器无法解析非相对/绝对路径的裸模块，只能识别全局变量。dev模式下Vite内置了模块解析器，能处理这类导入，所以运行正常；但build后rollup的external配置仅标记依赖为外部，不会替换ES模块中的导入语句，导致浏览器无法识别。

方案一：使用vite-plugin-externals插件（推荐） #

这个插件能自动在开发和生产环境将裸模块导入替换为全局变量引用，无需复杂的手动配置：

1. 安装插件

npm install vite-plugin-externals --save-dev

2. 修改vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { externalizeDeps } from 'vite-plugin-externals';

export default defineConfig({
  plugins: [
    react(),
    externalizeDeps({
      react: 'React',
      'react-dom': 'ReactDOM',
      'react-router-dom': 'ReactRouterDOM',
    })
  ],
});

3. 保留你已有的index.html中的CDN脚本，确保它们在main.jsx之前加载。

方案二：手动配置（无需插件） #

如果不想额外安装插件，可通过调整Vite配置同时处理开发和生产环境：

1. 修改vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  // 开发环境映射裸模块到全局变量
  resolve: {
    alias: {
      react: 'window.React',
      'react-dom': 'window.ReactDOM',
      'react-router-dom': 'window.ReactRouterDOM',
    },
  },
  build: {
    rollupOptions: {
      external: ["react", "react-dom", "react-router-dom"],
      output: {
        // 将输出格式改为UMD，让rollup的globals配置生效
        format: 'umd',
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "react-router-dom": "ReactRouterDOM",
        },
      },
    },
  },
});

2. 同样保留index.html中的CDN脚本顺序。

验证 #

修改后执行npm run build，再运行npm run preview，即可正常访问打包后的应用，包体积也会保持精简。

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