实战项目四：React 前端项目工程化实践

一、项目介绍

随着前端项目的规模不断增大，相关的工程自动化实践也必须跟上，同时为了团队协作需要遵守一定的项目规范。本实战项目，将带你熟悉基于 NPM Script 和 Prettier，ESLint，Git 等辅助工具的项目协作流程，Webpack 前端项目打包，并熟悉如何通过 Jenkins + Docker 部署 Nginx 服务器的自动化 CI/CD 流程。

二、教学目标

• 练习配置 NPM Scripts 环境变量与脚本

• 练习使用 Jest + Testing Library 编写自动化组件测试

• 练习 Webpack 打包与分析，编译构建 Web 产物

• 打造团队代码规范：Git Hook + Prettier 代码格式化 + ESLint 代码检查

• 练习使用 Jenkins 持续集成，触发自动化构建部署

• 练习使用 Docker 容器，自动化部署 Nginx 服务器

三、前置技能

• NodeJS & NPM 相关基础

• Jenkins、Git 基础

• Docker、Nginx 等基础

四、技能提升目标

前端代码规范与工程自动化实践：了解 -> 熟悉

五、学习周期

总时长约 3 小时

准备好代码库，快来尝试一下！

git clone https://github.com/JimmyLv/react-automation.git
cd react-automation

yarn install #安装依赖
yarn start #启动应用

当然，我还通过 CodeSandbox 的方式作为你的快速入口：https://codesandbox.io/s/github/JimmyLv/react-automation (可能需要科学上网)

帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：https://react-automation.jimmylv.now.sh/

CodeSandbox 代码编辑

六、配套资料

• 前端项目工程化与团队代码规范的相关实践与工具
• 使用npm构建Node.js和React应用
• Nginx 部署 - Ant Design Pro
• Containerize React app with Docker for Production - DEV Community