1.cra创建项目
create-react-app 快速构建 React 开发环境，自动创建的项目是基于 Webpack + ES6 。
npm install -g create-react-app // 构建react环境
yarn add create-react-app // yarn构建（推荐使用）
create-react-app my-app // 构建my-app
cd my-app // 切换到my-app
npm start // npm方式运行选择
yarn start // yarn方式运行选择
- 快速构建出项目名为my-app的react+ts项目
create-react-app my-app --template typescript
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
1.文件夹结构
my-app/
README.md
node_modules/
package.json
public/
index.html // 页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js js入口文件
logo.svg
以上文件必须以准确的文件名存在！！！可以删除或重命名其他文件。 在src下创建子目录，为了更快的重建，webpack只处理src中的文件，需要将任何JS和CSS文件放入src。
2.可用脚本
npm start
在开发模式下运行应用。 在浏览器中打开 http://localhost:3000 进行查看。
如果你进行编辑，页面将重新加载。 你还将在控制台中看到任何代码检查错误。
npm test 或 yarn test
以交互模式运行测试监视器。 默认情况下，运行与自上次提交以来更改的文件相关的测试。
npm run build 或 yarn build
将用于生产的应用构建到 build 文件夹。 它在生产模式下正确地打包了 React，并优化了构建以获得最佳性能。
构建被压缩并且文件名包含哈希。
你的应用已准备好部署。
3.支持的浏览器和特性
这是在 package.json 中指定的示例 browserslist：以基于全局使用 (> 0.2%) 的广泛浏览器用于生产构建，以及现代浏览器用于开发。
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
编辑 browserslist 配置时，你可能会注意到你的更改不会立即生效。 这是因为 babel-loader 中的问题 未检测到 package.json 中的变化。 一个快速的解决方案是删除 node_modules/.cache 文件夹并重试。
4.引入antd
1.使用npm或yarn安装
npm install antd --save // npm方式安装
yarn add antd // yarn方式安装
其他依赖,pnpm
pnpm install mobx mobx-react --save
pnpm install react-dom react-router-dom --save
pnpm install react-activation --save
pnpm install @ant-design/icons --save
pnpm install react-activation --save
AliveScope:react 实现keep-alive功能。将渲染过的组件（div.ka-content）存起来，等到再次用，从缓存拿到,使用js的 appendchild 到 KeepAlive中的 （div.ka-wrapper） import { AliveScope } from "react-activation";
5.按需加载
npm install babel-plugin-import // npm 方式
yarn add babel-plugin-import // yarn 方式
只需从 antd 引入模块即可，无需单独引入样式。
6.项目初始化配置
根目录新建文件vite.config.js
const plugins = [
styleImport({
libs: [
{
libraryName: 'antd',
esModule: true,
resolveStyle: (name) => {
return `antd/es/${name}/style/index`;
},
},
],
})
]
参考链接：blog.csdn.net/qq_39606853…
7.index.html
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> // 标签页logo(浏览器给网站的身份标识)
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> iOS设备标签页logo
<meta http-equiv="Cache-Control" content="no-transform" http-equiv="Cache-Control" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width, initial-scale=1，maximum-scale=1.0, user-scalable=no" /> // 渲染设备尺寸
<meta name="theme-color" content="#000000" /> // 主题颜色
<meta
name="description"
content="Web site created using create-react-app"
/> // 网站描述
<meta
name="keywords"
content="Web site created using create-react-app"
/> // 网站关键词
<link rel="dns-prefetch" href="//xxx.com" > // 尝试在请求资源之前解析域名
<title>React App</title> // 网站名
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> // 脚本未被执行时替代的文本
<div id="root"></div>
<script src="/src/assets/iconfont/iconfont.js" type="module"></script> // 引入iconfont库，没有可以不引入
</body>
2. vite 创建项目
如果厌恶了 webpack 的打包速度，可以选择使用vite来创建 React 应用。
npm create vite@latest 执行完 命令行可以选择。
使用 npm run dev 启动，vite 的启动速度和热更新速度都很快，远超过 webpack，新项目完全可以使用 vite 来代替 cra。
