大家好我是小泉，一个菜鸟打工人，截至目前都是在同事搭建的框架基础上进行搬砖，现在有空后，我自己去整理了一下如何从零开始搭建react项目。有哪些地方做的不对，或不到位的，欢迎大佬指正。
总括: react脚手架, router6,axios,dotenv,antd,redux
前提条件
nodejs
基本上一站式就可以了，也可以参考这一篇文章: zhuanlan.zhihu.com/p/442215189
通过react脚手架搭建
可以查看官网: create-react-app.dev/
npx create-react-app my-app
or
yarn create react-app my-app
如何在react中使用ts: create-react-app.dev/docs/adding…
目前我使用了ts，因此可以在创建的时候引入ts
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
Node-sass的坑
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
添加react-router-dom, redux, antd, axios
yarn add react-router-dom@6.16.0
yarn add react-redux@8.0.5yarn add redux@4.2.1yarn add redux-thunk@2.4.2
yarn add antd
yarn add axios
添加dotenv
yarn add dotenv
yarn add dotenv-cli
1. 添加文件
script/.dev
script/.prod
script/.test
.dev
REACT_APP_NODE_ENV=developmentREACT_APP_storageRouter=http://10.xx.xx.xx:9000REACT_APP_apiXXX=https://10.xx.xx.xxBUILD_PATH=release
.prod
REACT_APP_NODE_ENV=productionREACT_APP_storageRouter=http://10.xx.xx.xx:9000REACT_APP_apiXXX=https://10.xx.xx.xxBUILD_PATH=release
.test
REACT_APP_NODE_ENV=testREACT_APP_storageRouter=http://10.xx.xx.xx:9000REACT_APP_apiXXX=https://10.xx.xx.xxBUILD_PATH=release
2. 修改package的配置
"scripts": { "start": "dotenv -e scripts/.dev react-app-rewired start", "build": "dotenv -e scripts/.dev react-app-rewired build", "start:prod": "dotenv -e scripts/.prod react-app-rewired start", "build:prod": "dotenv -e scripts/.prod react-app-rewired build", "start:test": "dotenv -e scripts/.test react-app-rewired start", "build:test": "dotenv -e scripts/.test react-app-rewired build" }
在项目中使用@路径
在项目第一级文件夹下添加config-overrides.js文件
const path = require("path");module.exports = function override(config, env) { config.resolve.alias = { "@": path.resolve(__dirname, "src"), "@utils": path.resolve(__dirname, "src/utils"), "@com": path.resolve(__dirname, "src/components"), "@image": path.resolve(__dirname, "src/images"), }; // config.devtool = false; return config;}
tsconfig.json
{
compilerOptions: { "baseUrl": "./", "paths": { "@/*": [ "src/*" ], "@/utils/*": [ "src/utils/*" ], "@/com/*": [ "src/com/*" ], "@/image/*": [ "src/image/*" ], }},"include": [ "src", "./**/*.ts", "src/**/*" ], "exclude": [ "node_modules/**/*" ]
}
以上为项目的前期配置，全部代码可以查看gitee地址
gitee地址: gitee.com/xiaoquan_11…
