V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chrispaullhk
V2EX  ›  程序员

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

  •  
  •   chrispaullhk · 2021-06-16 09:42:59 +08:00 · 2219 次点击
    这是一个创建于 1268 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    项目地址 React-Delicacies

    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 进行部署
    14 条回复    2021-06-17 09:17:05 +08:00
    mightofcode
        1
    mightofcode  
       2021-06-16 10:43:25 +08:00
    这是做啥的?
    chrispaullhk
        2
    chrispaullhk  
    OP
       2021-06-16 11:16:33 +08:00
    @mightofcode 可以拿来直接做项目实现需求了 基础的架子都已经搭建好了
    longgediyi999
        3
    longgediyi999  
       2021-06-16 11:32:46 +08:00
    整个预览地址牙
    Imindzzz
        4
    Imindzzz  
       2021-06-16 11:51:05 +08:00   ❤️ 1
    没有 TS ??没有 TS ??没有 TS ??
    usercao
        5
    usercao  
       2021-06-16 12:02:52 +08:00   ❤️ 1
    还在用 Redux ??还在用 Redux ??还在用 Redux ??
    Imindzzz
        6
    Imindzzz  
       2021-06-16 12:03:56 +08:00
    redux 算是第一代状态管理了吧,这个真不行,开始我宁愿挂到 window 里我都不愿用这个。
    第二代是 mobx,这个集中管理,用了一段时间,就是使用还要注入,缺少类型提示,勉强用着。
    第三代 react16 推出了 hook,就有了这个 https://www.npmjs.com/package/unstated-next 。可以说已经完美了。
    chrispaullhk
        7
    chrispaullhk  
    OP
       2021-06-16 12:08:17 +08:00   ❤️ 1
    tozp
        8
    tozp  
       2021-06-16 13:27:57 +08:00 via iPhone
    既然是前端项目,该有个图吧?
    chenshun00
        9
    chenshun00  
       2021-06-16 14:00:41 +08:00
    应该需要一个 live demo,如果没有解决我们的痛点,一般人应该不会 clone 到本地 npm 一波吧,可能还会经历各种依赖拉不下来的问题
    chrispaullhk
        10
    chrispaullhk  
    OP
       2021-06-16 14:08:52 +08:00
    @chenshun00
    @tozp 谢大佬建议 回头我补个图
    Mutoo
        11
    Mutoo  
       2021-06-16 14:26:35 +08:00
    个人感觉 immer.js 比 immutable 轻量好用一些。
    shzx1994529
        12
    shzx1994529  
       2021-06-16 14:28:08 +08:00
    建议加上 redux-toolkit,去掉 immutable
    tousfun
        13
    tousfun  
       2021-06-16 18:18:43 +08:00
    @xd199153 unstated-next 这个库你一直在用吗, 看 github 以及两年没更新了, issues 的问题也没人回复了...
    Imindzzz
        14
    Imindzzz  
       2021-06-17 09:17:05 +08:00
    @919615766 是的,发布就一直在用。你看 readme 可以知道这个库就是对 react context api 的简单封装,没有多少更新维护的需求了。

    代码也就 40 行,真有啥问题 fork 一下自己改
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5747 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 03:20 · PVG 11:20 · LAX 19:20 · JFK 22:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.