JoyNop React Framework

[gitwidget type='github' url='JoyNop/pms_joy_cra']

logo.jpg

  • TypeScript & Antd & Less
  1. yarn add Install your dependencies
  2. yarn start Start running your project
  3. If you want to analyze certain files =>yarn analyze
  4. If you want to use custom env, then I recommend custom configuration in package.json and configure the build option to achieve the purpose of custom variables, likeyarn build:a
  • Please don't use eject easily, it is irreversible and can provide you with the latest react-scripts

特性:

  1. 全面支持Typescript
  2. ANTD ,采用Ant Design,解决了@用户,时间组件,组件动态查询,表格分页请求展示,面包屑导航,状态弹窗等经常使用的问题(这样很大程度提高开发效率,也不用浪费时间兼容三方库)
  3. 采用Less/Css之前是通过CSS IN JS的方式编写,导致过度依赖,不能兼容外部样式,解决因样式问题无法引用第三方组件,同时使用Less做样式,支持自定义变量,支持模块化引入Style
  4. ANTD,Lodash等常用库按需引入
  5. 可根据代码业务量通过Code Splitting拆分代码
  6. 无需单独设置static,通过yarn build后,build文件夹自动生static

    可直接上传到CDN,做CDN全球节点部署,解决网络拥塞问题,提高网站响应速度和可用性,降低源站压力,控制好缓存可预防源站宕机,影响用户访问

  7. 如果您需要通过外部变量控制接口访问,可通过Dockerfile 通过Docker运行获取变量脚本,通过脚本,执行build命令
  8. 仅通过nginx,Caddy搭建简单的服务即可,减轻服务端压力
  9. 支持vscode调试,断点,debugger ,F5即可
  10. 支持自定义变量 可通过如下命令进行测试


    完美支持自定义环境变量

    Windows (cmd.exe)

     set "REACT_APP_NOT_SECRET_CODE=abcdef" && yarn start

Windows (Powershell)

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (yarn start)

Linux, macOS (Bash)

REACT_APP_NOT_SECRET_CODE=abcdef yarn start

支持eject,但不建议eject,通过customize-cra扩展WebPack,可以保证react-scripts的稳定性,不会因某些支持库版本问题影响整个项目,可以顺利升级react-scripts

https://github.com/JoyNop/joynop_cra_framework