配置React和React-dom为CDN引入

第一步：卸载 React 相关依赖

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

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。

1. 安装插件：

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

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

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

   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。

1. 配置 vite.config.js：

   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',
           },
         },
       },
     },
   })

2. 修改 index.html：

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

   <!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>

常见问题与注意事项

1. 开发环境报错：

   如果在开发环境（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 时排除。

2. 版本一致性：

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

3. TS 类型缺失：

   卸载了 react 包后，TypeScript 可能会报错找不到类型定义。你需要安装类型声明文件：

   npm install @types/react @types/react-dom -D

4. CDN 的选择：

   常用的稳定 CDN 有：

   • unpkg.com
   • jsdelivr.net
   • cdnjs.com
     确保使用 .production.min.js 结尾的文件以获得压缩优化后的代码。