one-boy/react-starter-kit

react PC端开发基础脚手架

基于 react PC 端的中后台开发基础脚手架

技术栈及环境

• [email protected][email protected][email protected][email protected]
• antd 使用babel-plugin-import按需加载
• node v14.3.0
• npm v6.14.5

安装

• git clone 本项目
• npm install
  • 注意：安装时会下载 chrommium 包，如果不需要下载：请使用环境变量PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
  • windows git bash 使用：export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1，然后npm install
• 前提：npm run createDll -- 执行 dll 静态化公共库
• 开发：npm start
• 打包：npm run build
• 测试：
  • js：npm run test:js
  • ui：npm run test:ui

使用说明

工程化

• 样式 预编译采用Less 启用了css-loader的 modules 功能，开启模块化(cssModules)

• 测试 单元测试使用jest+enzyme e2e（端到端）ui 测试使用jest+puppeteer 运行命令：npm run test:js和npm run test:ui

• 代码风格和校验 代码风格采用prettier，语法检查校验采用eslint

• git 提交校验 采用husky+lint-staged

性能优化

• 代码分隔 通过React.lazy和React.Suspense+webpack import()方式 实现组件的动态导入和按需加载
• dll 化 一些长久不变的包，使用了 dll 静态化，如果app/resource/dll下没有文件，则执行npm run createDll创建，再npm start启动项目

目录文件介绍

• .vscode -- vscode 编辑器相关配置
• app -- 源码
  • api -- api 相关目录
    • base.js -- api 基类，提供 ajax 方法以及返回数据判断
    • User.js -- 示例，和用户相关的 api 都在这里，如登录登出，可通过 Mock 装饰器模拟数据返回
  • components -- 存放公用组件
    • store -- 通过 react 的context实现的简版 redux
    • transition -- 过度组件（待完善）
  • config -- 存放配置目录
    • base.js -- 基础配置，如 api host，请求超时时间，菜单，启用 Mock 等
    • code.js -- 一些通用码配置
  • Mock -- 存放 mock 数据文件
    • base.js -- mock 的返回数据判断
    • User -- 示例，用户类数据模拟
  • pages -- 存放页面业务逻辑
    • base --基础页面，如头部，左侧菜单
    • login --登录页面
    • list -- 列表页
    • single -- 独立页
  • resource -- 存放资源文件，如图片，视频等
  • style -- 存放样式
    • base.less --基础样式，公共样式
    • theme -- 主题目录，定义一些公共样式
    • login --登录页面样式
  • utils -- 存放公用工具
    • ajax.js --ajax 实现，采用axios库
  • client.js -- 入口文件
  • index.html -- html 模板文件
• scripts -- webpack 打包工具配置脚本
• .babelrc.js -- babel 配置文件，版本 babel>=7
• .eslintrc.js -- eslint 配置文件
• jsconfig.json -- 当在 webpack 配置了alias时，这个文件可以解决导入相关包无法自动提示的问题（在 vscode 中可行）
• postcss.config.js -- postcss 配置文件
• prettier.config.js -- prettier 配置文件

支持浏览器

• 良好支持：IE11; EDGE; chrome21+; safari6.1+;firefox28+
• 有些许问题，主要是老式flexbox语法问题和antd兼容性原因:IE9+; EDGE; chrome4+; safari3.1+;firefox2+

关于测试

e2e 测试

运行npm run test:ui前，需要确保'./.local-chromium/win64-737027/chrome-win/chrome.exe'有这个路径，没有的话，可以联系我或者自己下载

npm run test:ui运行完成后，会在项目根路径下生成test_logs文件夹，存放测试报告。

jest官方文档：jest.io

puppeteer官方文档：puppeteer

其它说明

• 有什么建议或问题随时和我交流
• 使用到的 vscode 插件：
  • 文件头部修改信息：vscode-fileheader
  • ESLint
  • Prettier
  • CSS Modules
  • Beautify css/sass/scss/less

走过的坑

• webpack4.x 升级到 webpack5.x

  webpack-dev-server 无法使用热加载(hmr)问题

  通过在 webpack.base.config.js 中加入target:"web"配置解决

  详情：webpack/webpack-dev-server#2758

• 热加载功能更换包

  之前是使用react-hot-loader+@hot-loader/react-dom配置使用热加载

  现在换成了react-refresh启用热加载功能

  换后打包遇到了$RefreshReg$ is not defined的错误，原因是react-refresh不需要再 production 环境使用，webpack.base.config.js区分下环境就行。详情：pmmmwh/react-refresh-webpack-plugin#176