实战项目四：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 小时

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

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

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

CodeSandbox 代码编辑

Edit react-automation

六、配套资料

上一页实战项目三：ECharts 商品数据可视化

最后更新于

这有帮助吗？