其他章节请看：
react 高效高质量搭建后台系统 系列
脚手架搭建
本篇主要创建新项目 myspug，以及准备好环境（例如：安装 spug 中用到的包、本地开发和部署、自定义配置 react-app-rewired、代理 http-proxy-middleware、babel），为后续搭建真正的框架打好基石。
注：许多细节前面我们已经研究过，这部分就不在冗余介绍，请看相关链接。
创建新项目
详情请看 这里
Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。
$ npx create-react-app myspug
$ cd myspug/
$ npm start
访问 http://localhost:3000 即可看到 react 的页面。就像这样：
myspug 目录结构如下：
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2022/3/3 17:50 node_modules
d----- 2022/3/3 17:48 public
d----- 2022/3/18 19:22 src
-a---- 1985/10/26 16:15 310 .gitignore
-a---- 2022/3/3 17:49 1120931 package-lock.json
-a---- 2022/3/3 17:49 817 package.json
-a---- 1985/10/26 16:15 3359 README.md
- public 中最重要的是
index.html，即单页面 -
src/index.js 是入口文件，里面引用着 src/App.js 组件。
安装依赖包
我们根据 spug/packages.json 的内容，选择性的安装自己所需要的软件包。
// spug/packages.json
{
"name": "spug_web",
"version": "3.0.0",
"private": true,
"dependencies": {
// icon
"@ant-design/icons": "^4.3.0",
// 图表相关
"@antv/data-set": "^0.11.8",
// Ace 是一个用 JavaScript 编写的代码编辑器。 （不用）
"ace-builds": "^1.4.13",
// ui
"antd": "^4.19.2",
// http
"axios": "^0.21.0",
// 图表
"bizcharts": "^3.5.9",
// 小型功能路由器，通过搜索 `Enroute({` 发现只在 Test.js 中使用，应该是用于测试（不用）
"enroute": "^1.0.1",
// 路由相关
"history": "^4.10.1",
// jquery （不用）
"jquery": "^3.6.0",
"lodash": "^4.17.19",
// 状态
"mobx": "^5.15.6",
"mobx-react": "^6.3.0",
// 日期库
"moment": "^2.24.0",
// 数字
"numeral": "^2.0.6",
"react": "^16.13.1",
// 与 ace Editor 相关（不用）
"react-ace": "^9.5.0",
// react
"react-dom": "^16.13.1",
// 路由
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
// 浏览器中使用终端（不用）
"xterm": "^4.6.0",
"xterm-addon-fit": "^0.5.0"
},
// 本地启动、打包
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
// eslint 相关。查找并修复JavaScript代码中的问题。
"eslintConfig": {
"extends": "react-app"
},
// 编译后的源码支持的浏览器。不用动
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
// 用于支持 es6 中装饰器的语法
"@babel/plugin-proposal-decorators": "^7.10.5",
"anywhere": "^1.5.0",
"bx-tooltip": "^0.1.6",
// 新的 [email protected] 版本的关系，你还需要安装 customize-cra
"customize-cra": "^1.0.0",
// http 代理中间件
"http-proxy-middleware": "0.19.2",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mockjs": "^1.1.0",
// 一个对 create-react-app 进行自定义配置的社区解决方案
"react-app-rewired": "^2.1.6"
}
}
笔者安装如下软件包：
// ui
$ npm i antd
// 状态管理
$ npm i mobx mobx-react
// http
$ npm i axios
// 路由
$ npm i react-router-dom@5
// icon
$ npm i @ant-design/icons
// 修改配置文件
$ npm i -D react-app-rewired customize-cra
// css 预编译
$ npm i -D less less-loader
// bebel 相关
$ npm i -D @babel/plugin-proposal-decorators@7
// mock 数据
$ npm i -D mockjs@1
// 图表
$ npm i bizcharts@3
$ npm i @antv/data-set
// 路由相关
$ npm i history@4
// js 工具库
$ npm i lodash
// 日期
$ npm i moment
// 数字
$ npm i numeral
Tip：如果安装失败可以这样：
- 每次安装一个包
- 切换安装包的版本
- 再次尝试，有时候第二遍就成功
- 回家尝试，公司安装失败，家里可能安装成功
至此，对比 spug 和 myspug 的 package.json，有如下差异以及一些未完成项：
- myspug 没有jquery、ace-builds、react-ace、enroute、xterm、xterm-addon-fit，因为笔者不需要。
- bx-tooltip 视后面需求是否安装
-
scripts，用于启动项目或编译项目。spug 中使用的是 react-app-rewired，而 myspug 使用的是 react-scripts。下文配置。 -
http-proxy-middleware 未安装，代理相关。下文安装并配置 - eslintConfig 配置，eslint 相关。两者几乎相同，不管它。
- browserslist 配置，编译后的源码支持的浏览器。两者相同，不管它。
antd 按需引入 css
详情请看 这里
spug 中使用的是 react-app-rewired，而 myspug 使用的是 react-scripts。
react-app-rewired 是一个对 create-react-app 进行自定义配置的社区解决方案。
react-app-rewired 的引入是作为 antd 按需引入 css 解决方案的一部分。
步骤如下：
- 安装 react-app-rewired 和 customize-cra（上文已安装）
- 安装 babel-plugin-import
- 修改 package.json，通过
react-app-rewired 来启动、打包和测试
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
- 项目根目录创建一个
config-overrides.js（内容请看链接） 用于修改默认配置 - 修改 App.js 用于验证 antd 样式按需引入是否生效
// E:\myspug\src\App.js
import { Button } from 'antd';
export default function App() {
return (
<div className="App">
<Button type="primary">Primary Button</Button>
</div >
);
}
- 最后启动服务
npm run start，浏览器访问 http://localhost:3000/，看见一个蓝色按钮说明成功。
Tip: 笔者遇到如下报错，经尝试发现点击antd.css（@import '~antd/dist/antd.css';）报错，怀疑包下载有问题，最后卸载 antd，再次安装 antd@4即可。
Compiled with problems:X
ERROR in ./src/App.js 3:0-34
Module not found: Error: Can't resolve 'antd/es/button/style/css' in 'E:\myspug\src'
代理
详细介绍 这里
代理后续或许会用得到，我们先配置它。
Tip：笔者这版的react脚手架默认已有 http-proxy-middleware（http 代理中间件），所以我们无需重复下载
步骤如下：
- 新建
setupProxy.js 用于配置
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
// 将原来的 proxy 改为 createProxyMiddleware
createProxyMiddleware(
'/pengjiali',
{
target:',
changeOrigin: true
}
)
)
}
- 创建一个组件（HelloWorld.js）并在 App.js 中引入
const axios = require('axios');
export default function HelloWorld() {
axios.get('/pengjiali/p/14561119.html')
.then(function (response) {
// handle success
console.log(response.data);
}).catch(function (error) {
// handle error
console.log(error);
})
return <div>hello world2!</div>
}- 重启服务，控制台输出博文内容，说明代理生效。
Tip：初次运行 require('axios') 报错，将 axios 卸载，安装和 spug 中相同的版本 npm i axios@0 即可。
babel
例如 es11 中有 BigInt、可选链操作符( ?. )、空值合并操作符（??），spug 是否会将 ?. 编译，在低版本浏览器中运行呢？
在 spug 中 package.json 中与 babel 相关的单词只有 @babel/plugin-proposal-decorators（后续讲状态管理 mobx 时一起介绍），也就是用于支持装饰器。
由于后台系统通常可以指定浏览器版本，笔者就不展开。
Tip：感兴趣的朋友可以自行提取 spug 项目的 webapck 配置查看。这个过程是不可逆的。
其他章节请看：
react 高效高质量搭建后台系统 系列
作者：彭加李
本文版权归作者有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。