配置React和React-dom为CDN引入

第一步：卸载 React 相关依赖

首先，你需要从项目中移除 react 和 react-dom。

bash 复制代码

npm uninstall react react-dom
# 或者使用 yarn
yarn remove react react-dom
# 或者使用 pnpm
pnpm remove react react-dom

注意：如果有其他依赖项（如 react-router-dom 或 UI 库）强依赖于本地 React 版本，这可能会导致报错。但在配置好 Alias 或 External 插件后，通常可以解决。

第二步：安装并配置 `vite-plugin-cdn-import`

为了让 Vite 在构建和开发时知道 import React from 'react' 实际上是指向全局变量 React，我们需要一个插件来处理这种映射。最常用的插件是 vite-plugin-cdn-import。

安装插件：

bash 复制代码

npm install vite-plugin-cdn-import --save-dev

配置 vite.config.js (或 ts)：

你需要告诉插件，当代码中引用 react 时，将其替换为全局变量 React，并指定 CDN 地址。

javascript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    react(),
    importToCDN({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: 'https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js',
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js',
        },
      ],
    }),
  ],
})

参数说明：

name: 包名，对应你在代码中 import ... from 'package-name' 的名字。
var: 全局变量名，CDN 文件加载后挂载在 window 上的变量名（例如 React 的 UMD 构建会挂载 window.React）。
path: CDN 的完整 URL。

第三步：手动引入 CDN (如果不使用上面的插件自动注入)

如果你不想使用插件自动注入 script 标签，或者插件在开发模式下有问题，你可以使用 Vite 的 rollupOptions.external 配合手动修改 HTML。

配置 vite.config.js：

javascript 复制代码

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      // 告诉打包工具，external 中的依赖不要打包进 vendor
      external: ['react', 'react-dom'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

修改 index.html：

在 <body> 标签内，你的主入口脚本（/src/main.jsx）之前，手动添加 CDN 链接。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React App</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- 必须在你的代码执行前加载 React -->
    <!-- 注意版本号需要与你项目兼容的版本一致 -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>

    <!-- 你的入口文件 -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

常见问题与注意事项

开发环境报错：

如果在开发环境（npm run dev）遇到 React is not defined，是因为 Vite 在开发模式下默认还是会去查找 node_modules。
- 解决方案 ：推荐使用 步骤二 中的 vite-plugin-cdn-import，它会自动处理开发和生产环境的注入。
- 或者，如果你用了 方案 B ，你可能需要安装 vite-plugin-external 等插件来确保开发环境也能正确识别全局变量，或者保留 node_modules 中的 react 仅用于开发环境（通过 npm i react react-dom -D 移入 devDependencies），仅在 build 时排除。
版本一致性：

CDN 链接中的版本号（如 @18.2.0）必须与你之前 package.json 中使用的版本保持一致，否则可能会出现 API 不兼容的问题。
TS 类型缺失：

卸载了 react 包后，TypeScript 可能会报错找不到类型定义。你需要安装类型声明文件：
bash 复制代码
```
npm install @types/react @types/react-dom -D
```
CDN 的选择：

常用的稳定 CDN 有：
- unpkg.com
- jsdelivr.net
- cdnjs.com
  确保使用 .production.min.js 结尾的文件以获得压缩优化后的代码。

配置React和React-dom为CDN引入

第一步：卸载 React 相关依赖

第二步：安装并配置 vite-plugin-cdn-import

第三步：手动引入 CDN (如果不使用上面的插件自动注入)

常见问题与注意事项

第二步：安装并配置 `vite-plugin-cdn-import`