React全家桶从搭建到部署

Posted Hkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React全家桶从搭建到部署相关的知识,希望对你有一定的参考价值。

自己搭建的基于 React + Redux + Antd + Immutable 的前端项目,同时支持单元测试和集成测试, 支持CI 以及 docker部署,目前还在不断完善中,希望大佬们捧场给个 Star

项目地址 React全家桶从搭建到部署 React-Delicacies

  • https://github.com/chris-paul...

React-Delicacies

基于 React, Redux, React-Router, Immutable 的前端脚手架

关于主要技术栈

  • 基于主流的 React,React-Router 进行项目开发,使用 Redux 进行状态管理,使用 Immutable 进行优化
  • 基于 redux-thunk 处理 action 异步问题,关于 action 的调用顺序如有需要请使用自研中间件 redux-controlled-promise,使用方式请看官方文档
  • 基于 Jest 和 Enzyme 提供完善的单元测试和集成测试, 复杂场景冒烟测试可自己安装相应依赖
  • 支持第三方平台 Mock 数据
  • 完善的 Axios 请求封装以及规范的错误处理

关于前端自动化

  • 本项目基于 Webpack 实现前端自动化

    • 支持Antd, moment, lodash 等常用库的 tree-shaking
    • 每一个 Router 作为一个 chunk 进行懒加载,代码拆分,减少包的体积
    • 抽离公共代码配合 hash 持久化, 加快用户访问速度
    • 为模块提供编译中间缓存, 提升二次编译速度
    • 生产环境提供 gzip 的代码压缩,不耗费后端服务器的的 CPU 进行压缩
    • Webpack hash 持久化,配合 HTTP 缓存提高访问效率
    • 支持 CSS Module
    • 支持 Less 等预编译语言,规范书写 mixins,管控 variables
    • 配合第三方 CDN 提高浏览器资源请求效率
    • 支持 Webpack 多进程, 提升编译以及打包速度

关于开发体验以及规范

  • Eslint 和 Prettier 完美结合,支持 React, Jsx, Js, Jest 等的语法检测,以及完美的代码格式化,编写体验非常棒
  • Stylelint 检测 CSS,Less 等语法,保证样式书写规范
  • commit 之前,自动对暂存区代码修复以及检测,把守好代码最后一道关口
  • CI CD 持续集成,保证代码质量

关于分析报告

  • 可以输出完善的测试报告分析测试覆盖率
  • 支持命令行查看打包分析报告

关于项目部署

  • 支持使用 Docker 和 nginx 进行部署

以上是关于React全家桶从搭建到部署的主要内容,如果未能解决你的问题,请参考以下文章

※Spring全家桶从入门到X神-Eureka注册中心

❤️‍Spring全家桶从入门到大神--SpringMVC之SSM整合(用户-增删改查!)

万字长文 Vue全家桶从入门到实战,超详细笔记整理 ( 三 ) (建议收藏)

React全家桶——项目注意工程搭建

如何搭建一个REACT全家桶框架

react自制全家桶Webstrom+React+Ant Design+echarts搭建react项目