无网络环境下创建React项目的实现方案及相关问题咨询

项目运行相关问题 #

• 你当前的场景下无法使用React相关的命令行工具（包括create-react-app、vite等常用React开发脚手架），所有这类工具都依赖Node.js和node_modules依赖包，你只能编写代码后直接在浏览器中加载index.html运行。
• 调试能力不会完全丢失：只要你提前下载的是未压缩的开发版本的React、ReactDOM脚本，而非生产环境压缩版，浏览器的React DevTools插件依然可以正常使用，支持组件树查看、props/state调试等能力。

node_modules处理相关问题 #

• 你的场景完全不需要处理node_modules，也不需要关注create-react-app安装的大量依赖。
• CDN提供的React相关脚本仅包含React核心、ReactDOM等基础运行时依赖，create-react-app内置的打包工具、语法检查工具、开发服务、各类loader等依赖均不包含在CDN资源中，这些工具在你无法使用node的场景下也没有使用价值，无需额外处理。

Babel使用相关问题 #

• 如果你需要在离线环境中直接编写JSX语法的代码，就需要提前下载Babel的standalone版本脚本，和React脚本一起传输到离线设备，在index.html中引入即可完成JSX的runtime转译。
• 如果你可以在有网络的环境中提前把JSX代码转译为纯JavaScript代码，再传输到离线环境使用，就不需要额外准备Babel资源。

仅使用CDN脚本会损失的能力 #

• 没有本地开发服务、热更新能力，修改代码后需要手动刷新浏览器才能看到效果，开发效率较低
• 没有代码构建、优化能力，无法实现代码分割、资源压缩、Tree Shaking等性能优化操作，项目体积较大时加载速度会明显变慢
• 无法使用绝大多数需要npm安装的React生态第三方库，仅能使用提供了UMD格式CDN资源、且你可以提前下载到本地的库
• 没有原生的语法检查、类型检查能力（如ESLint、TypeScript），如果需要这类能力只能在有网络的开发环境完成校验后再将代码传输到离线设备
• 若使用runtime版Babel转译JSX，转译性能较低，仅适合小型项目使用，大型项目会出现明显的加载、运行卡顿

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