cra-template-jbt-pc

金贝塔 react pc 项目模板脚手架

说明

React 的项目脚手架 create-react-app 被广泛使用，但是 CRA 使用 react-scripts 的定制性并不好，大多情况下需要通过 eject 来修改配置，造成后面 react-scripts 有功能更新的时候不能同步升级。

本脚手架采用 react-app-rewired 和 customize-cra 对 react 项目进行配置修改，不需要 eject 后续可以享受 react-scripts 的功能升级，同时包括必要的生态整合，代理配置，EsLint 代码检查配置，prettier 代码格式化，git 提交前的检查，支持 Less 和 Sass，集成包分析工具等。

安装

// 从 npm
npx create-react-app my-app --template jbt-pc

安装完之后，由于 create-react-app 默认装最新版的 react，而 react 17 和 icestore 版本限制冲突，需要手动安装 icestore

npm install --save @ice/store

安装后如果要启用 git pre-commit 代码检查需要配置相应钩子，只用执行一次即可：

npm run prepare

启用 pre-commit 检查后，如果遇到紧急清空需要绕过检查 git commit --no-verify

配置说明

config-overrides.js

react-app-rewired 的配置文件在根目录的 config-overrides.js 其中主要做了以下配置更改

• 增加 webpack 别名 ~ 对应 src 目录
• 增加 antd 的按需引入
• 开发时增加 source map 方便 debug，生产包去掉 source map 减少不必要请求
• 添加 less-loader 支持 less 编译
• 添加 webpack 插件 progressbar 方便看编译耗时
• 添加 Dev Server 基本配置
• 去掉 TerserPlugin 在打生产包的时候会生成 LICENSE.txt 功能

如果需要比较复杂的 Dev Server 功能，可以在 src 目录下增加 setupProxy.js 文件，使用 http-proxy-middleware 来进行配置，详见文档 https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

.env

一些环境变量的配置文件，优先级低于命令中的环境变量配置。CRA 相关的环境变量见文档 https://create-react-app.dev/docs/advanced-configuration/

其中 Webpack Dev Server 的 HOST 和 PORT 配置以及生产包不生产 source map 的配置都在这个文件

.prettierrc

prettier 的配置文件，相关配置项见文档：https://prettier.io/docs/en/options.html，配置方法：https://prettier.io/docs/en/configuration.html

tsconfig.json

TypeScript 的配置文件，编译选项相关配置见 https://www.tslang.cn/docs/handbook/compiler-options.html, 其中如果要增加模块对应的别名，应该在 tsconfig.paths.json 文件中修改，不要直接在 tsconfig.json 中增加。

.eslintrc

EsLint 的配置文件，相关规则参考 https://cn.eslint.org/docs/rules/

.husky

husky 主要是用来做提交前的代码检查的，在 pre-commit 时会去执行 npx lint-staged 命令，执行 package.json 中 lint-staged 相关的处理。

生态整合

统一不同技术栈，主要是整合 Router，状态管理，样式初始化，API 请求工具。

React Router

集成 React Router，官方文档 https://reactrouter.com/web/guides/quick-start

状态管理 -- icestore

轻量化的基于 Hooks 的状态管理。需要注意 icestore 内部是通过调用 immer 来实现可变状态的。 Immer 只支持对普通对象和数组的变化检测，所以像字符串或数字这样的类型需要返回一个新值。

const count = {
  state: 0,
  reducers: {
    add(state) {
      state += 1;
      return state;
    },
  },
}

文档： https://github.com/react-boilerplate/react-boilerplate-cra-template

样式初始化 -- normalize.css

使用 normalize.css 对 html 元素自带样式进行重置，使用时在 index.tsx 文件使用其它样式之前引入即可。

import 'normalize.css'
import '~/styles/index.less'

API 请求工具 -- Axios

通用 Ajax 请求工具，文档见 https://github.com/axios/axios

包分析工具

默认集成 webpack-bundle-analyzer 和 source-map-explorer 作为包分析工具。

使用 webpack-bundle-analyzer:

npm run analyze

会自动生成 report.html 可以查看每个包的依赖内容，以及大小。

使用 source-map-explorer:

npm run analyze-sourcemap

生成相应的 source map 浏览页面。

注意: source-map-explorer 命令会在生产包生成 source map，不要直接发生产。

通用工具

待补充