当前位置：首页 > React

react如何发包

2026-03-30 16:53:18React

发布 React 项目到生产环境

使用 npm run build 命令生成生产环境的优化代码。该命令会在项目根目录下创建一个 build 文件夹，包含所有压缩和优化后的静态文件。

确保在 package.json 中配置了正确的构建脚本：

"scripts": {
  "build": "react-scripts build"
}

部署到静态文件服务器

将 build 文件夹中的内容上传到静态文件托管服务。常见的托管平台包括：

Netlify
Vercel
GitHub Pages
AWS S3
Firebase Hosting

对于 GitHub Pages，可安装 gh-pages 包并添加部署脚本：

"scripts": {
  "deploy": "gh-pages -d build"
}

配置路由兼容性

如果使用客户端路由（如 React Router），需要配置服务器将所有路由请求重定向到 index.html。对于 Apache 服务器，可添加 .htaccess 文件：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

环境变量配置

生产环境变量需以 REACT_APP_ 前缀定义在 .env.production 文件中：

REACT_APP_API_URL=https://api.example.com

性能优化建议

启用代码分割和懒加载以提高性能：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

考虑使用 Webpack Bundle Analyzer 分析包大小：

"scripts": {
  "analyze": "source-map-explorer build/static/js/*.js"
}

持续集成部署

在 CI/CD 流程中自动构建和部署。示例 GitHub Actions 配置：

react如何发包

name: Deploy
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

标签: react