无网络环境下创建简易React应用及联网后发布方法咨询

一、离线创建React应用的方法 #

1. 提前缓存依赖包（有网时操作） #

在网络正常时，将React项目所需的核心依赖包缓存到本地npm缓存中，后续离线时可直接调用：

# 缓存React、ReactDOM及Vite相关依赖（Vite方案）
npm cache add react react-dom vite @vitejs/plugin-react
# 如果用Create React App，缓存对应包
npm cache add react react-dom create-react-app react-scripts

2. 离线手动初始化项目 #

Vite搭建流程（离线步骤）

• 创建项目目录并进入：

  mkdir offline-react-app && cd offline-react-app
  

• 初始化npm（无需联网）：

  npm init -y
  

• 从缓存安装依赖：

  npm install react react-dom vite @vitejs/plugin-react
  

• 手动创建核心文件：
  • index.html：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React App</title>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="/src/main.jsx"></script>
      </body>
    </html>
    

  • src/main.jsx：

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App.jsx'
    import './index.css'
    
    ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    )
    

  • src/App.jsx：

    function App() {
      return (
        <div className="App">
          <h1>Offline React App</h1>
        </div>
      )
    }
    
    export default App
    

  • 添加Vite配置文件vite.config.js：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
    })
    

• 在package.json中添加脚本：

  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
  

  离线时运行npm run dev即可启动开发服务器，npm run build可打包项目（无需联网）。

纯手动无脚手架方案

如果不想依赖npm缓存，可直接下载React和ReactDOM的生产/开发版文件到本地，通过原生ES模块引入：

• 下载react.development.js、react-dom.development.js（开发环境）或对应的生产版文件，放到项目的lib目录
• 在index.html中引入并使用：

  <script type="module">
    import React from './lib/react.development.js';
    import ReactDOM from './lib/react-dom.development.js';
  
    function App() {
      return React.createElement('h1', null, 'Offline React App');
    }
  
    ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
  </script>
  

  这种方式完全不需要npm，适合极端离线场景。

3. 提前下载完整项目模板 #

有网时创建一个React项目（npm init vite@latest my-template -- --template react），将整个项目文件夹复制保存为模板。离线时直接复制该模板文件夹，修改项目名称和配置即可快速创建新应用。

二、Codesandbox的使用说明 #

Codesandbox是在线云端编辑器，必须联网才能加载、编辑和运行项目，离线状态下无法使用。但可以在有网时：

• 创建或打开Codesandbox项目
• 点击右上角的Export按钮，选择Download ZIP将项目文件下载到本地
• 离线时用本地编辑器（如VS Code）修改下载的项目文件，等网络恢复后，可将本地文件上传到Codesandbox或直接通过npm run build打包发布。

内容的提问来源于stack exchange，提问作者antonkornilov-ua