将基于CDN的React脚本转换为使用本地安装React的方法

先明确一个关键区别 #

你执行的npx npm view react-native version查询的是React Native（移动端开发框架）的版本，但你要替换的是Web端的react和react-dom，二者不属于同一技术栈。请先执行以下命令确认本地是否正确安装了Web端的React核心包：

npm list react react-dom

如果结果显示未安装，执行npm install react react-dom完成安装。

替换CDN脚本为本地文件 #

把原来的CDN引入脚本，替换为指向本地node_modules目录中对应UMD包的路径：

生产环境（压缩优化版） #

<script crossorigin src="/node_modules/react/umd/react.production.min.js"></script>
<script crossorigin src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>

开发环境（未压缩，便于调试） #

<script crossorigin src="/node_modules/react/umd/react.development.js"></script>
<script crossorigin src="/node_modules/react-dom/umd/react-dom.development.js"></script>

配置Web服务器访问权限 #

默认情况下，多数Web服务器不会对外暴露node_modules目录，需要添加静态文件访问配置：
以Express为例，添加如下代码：

const express = require('express');
const app = express();

// 允许服务器对外提供node_modules下的静态文件
app.use('/node_modules', express.static('node_modules'));

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

额外建议 #

如果你的项目使用Webpack、Vite等构建工具，更推荐通过模块化导入的方式使用React（如import React from 'react'; import ReactDOM from 'react-dom/client';），这种方式能实现代码打包优化，比直接引入UMD脚本更适合生产项目。

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