goddchen/lol-champ-voting

镜像概述

基于Create React App构建的React应用开发镜像，集成React应用开发所需全套工具链，支持从开发、测试到生产构建的完整流程，提供标准化开发环境，简化React应用的初始化与维护。

核心功能与特性

• 开发模式运行（npm start）：启动开发服务器，支持代码热重载，实时预览应用（访问http://localhost:3000），并在控制台显示lint错误。
• 测试执行（npm test）：启动交互式监视模式测试运行器，支持React应用的单元测试与集成测试。
• 生产构建（npm run build）：生成生产就绪版本应用至build目录，包含React生产模式打包、代码压缩、文件名哈希处理，优化性能。
• 配置自定义（npm run eject）：（单向操作）将Webpack、Babel、ESLint等构建配置文件复制到项目中，允许完全自定义构建流程。

使用场景

• React单页应用（SPA）的日常开发与调试
• React组件及应用的自动化测试执行
• 为生产环境准备优化后的应用构建包
• 需要深度定制构建工具链的React项目开发

使用方法与配置说明### 基础使用流程

1. 将本地React项目代码挂载至容器工作目录（需基于Create React App初始化）。
2. 通过容器内npm脚本执行开发、测试或构建操作。

常用命令详解#### 1. 开发模式运行

启动开发服务器，实时加载代码变更：

bash
npm start

• 功能：在开发模式下运行应用，监听代码变更并自动重载页面。
• 访问地址：http://localhost:3000（需确保容器3000端口映射至主机）。
• 注意：本地代码编辑后，通过Docker挂载实现容器内代码同步更新。

2. 执行测试

启动交互式测试运行器：

bash
npm test

• 功能：以监视模式运行测试套件，代码变更时自动重新执行相关测试。
• 参考文档：Create React App 测试指南。

3. 生产构建

生成优化后的生产构建包：

bash
npm run build

• 功能：将应用打包至build目录，包含：
  • React生产模式捆绑（排除开发环境代码）
  • 代码压缩与tree-shaking优化
  • 静态资源文件名哈希（用于浏览器缓存控制）
• 输出物：build目录可直接部署至Nginx、S3等静态资源服务器。
• 参考文档：Create React App 部署指南。

4. 配置自定义（eject）** 注意：此操作不可逆，执行后无法恢复！**将构建配置文件复制到项目中，获取完全控制权：

bash
npm run eject

-** 功能 ：移除项目中单一构建依赖，将Webpack配置、Babel预设、ESLint规则等复制到项目根目录，允许手动修改。 - 适用场景 ：默认配置无法满足需求时（如自定义loader、插件或构建流程）。 - 后续影响 **：除eject外的所有命令仍可使用，但指向复制后的脚本文件。

Docker开发环境部署示例

假设镜像名称为react-dev-env，本地项目目录为./my-react-app，启动开发环境：

bash
docker run -it --rm \
  -v $(pwd)/my-react-app:/app \
  -p 3000:3000 \
  react-dev-env \
  npm start

-** 参数说明 **： --v $(pwd)/my-react-app:/app：挂载本地项目目录至容器/app工作目录。 --p 3000:3000：映射容器3000端口至主机，实现本地访问。 ---rm：容器退出后自动清理，避免残留。

参考文档

• Create React App 官方文档
• React 官方文档
• 代码分割：Create React App 代码分割指南
• 构建包分析：Create React App 包大小分析
• 高级配置：Create React App 高级配置
• 故障排除：npm run build 压缩失败解决