react 使用rewired_GitHub - zh-zhang-127/react-app: create-react-app + react-app-rewired 进行二次配置：按需加载、le...

react-app

create-react-app + react-app-rewired 进行二次配置：按需加载、less-loader、启用 eslint 配置、特殊自定义配置

如果需要更具体的业务模版，可以跳转至 模版生成器

使用方法

git clone https://github.com/dyb881/react-app [项目名称]

cd [项目名称]

npm i // 安装依赖

npm start // 开发模式

npm run build // 打包生产代码

npm run mock // 启动模拟数据服务

npm run serve // 启动快捷服务

拓展功能

除了 create-react-app --typescript 已有的功能外，做出一个更完善的配置功能，以及一些基础准备：

prettier 格式化配置(实际使用需要在 IDE 上安装 prettier)

homepage 打包路径设置(默认为相对路径)

tsconfig.json ts 编译配置(追加装饰器和迭代器支持，以及遇到未使用变量报错)

antd antd-mobile lodash 三个常用依赖的按需加载

less 文件加载，以及主题色设置(主题色可参考 config-overrides.js 文件)

eslint 可二次配置(需要在 package.json 中配置)

可自定义 webpack 配置

默认在生产模式中配置了代码压缩

添加 postcss 插件

添加 postcss-pxtorem(注！非默认，需手动清除注释)

index.html 默认添加：移动端禁止缩放、收藏栏图标、手机号码识别禁止、等相关属性设置

开发环境下，热更新(即 start 后，保存文件会导致对应组件自动刷新更改，而不刷新整个页面，保留当前状态)

基础样式准备(normalize.css 样式初始化，App.less 小量样式的初定义，以及一些常用类的定义，实际使用 css module 的话，可以不理会这些类)

路由准备，并设置过度动画(使用个人封装的路由组件 @dyb881/router，若有特殊需求，可自行使用 react-router-dom 根据配置注册路由)

请求配置，以及默认请求器(使用个人封装的请求器 @dyb881/fetch-request，若有特殊需求，自行创建请求器，尽量保持请求器的一致导出，如 get、post、put 等)

模拟数据服务(快捷启用一个 模拟数据接口服务，具体注册方法 可参考 @dyb881/mock-server)

快捷服务启动(默认指向，打包后的文件夹 build)

目录结构

src - 源代码，开发项目过程中，一般只会动这里的代码

api - 请求相关，可直接导出请求函数，以及封装后的接口

request.ts - 配置导出请求方法

mock-server.js - 模拟数据服务接口注册

index.ts - 封装并导出请求接口

components - 全局组件，会被页面复用的组件

config - 全局配置

request.ts - 请求配置

routers.ts - 路由配置

images - 图片资源

pages - 项目页面 - 开发中，以页面为单位的文件夹都存放于此

types - ts 类型定义，以及引用第三方库类型声明

utils - 工具库

App.less - 全局样式定义

App.tsx - 项目入口，主要用于状态的注入，和路由定义

react-app-env.d.ts - 全局声明

搭建过程

虽然以下配置过程都是用 npm，但是实际使用时，推荐 yarn

环境初始化

由于可兼容 js/jsx/ts/tsx 开发，并同步支持 eslint 检测

如 /src/pages/home/index.tsx 和 /src/pages/user/index.jsx 这两个文件均可正常编译使用

创建时直接使用 ts 环境即可

npx create-react-app react-app --typescript

package.json 追加配置

{

"prettier": { // 代码格式化 prettier 的配置，自行查阅如何在编辑工具上安装和使用 prettier

"printWidth": 120,

"singleQuote": true,

"trailingComma": "es5",

"bracketSpacing": true,

"jsxBracketSameLine": false,

"parser": "babylon",

"semi": true,