前言

最近在学习react想通过写文章的模式加深了解 这个用的是create-react-app创立的我的项目 前期有空的话会写一篇从0-1用webpack实现我的项目构建 敬请期待吧~
小demo是跟着https://gitee.com/shenghaibin... 敲的

1.用create-react-app创立的我的项目

npx create-react-app my-demo

2.装置我的项目所需依赖

npm install react-router-dom
npm install mobx mobx-react-lite sass dayjs echarts uuid -D
npm install react-vant@2.0.0-alpha.32 -D

3.批改index.js入口文件 增加路由

console.log('index.js');import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'));root.render(  <BrowserRouter>    <App />  </BrowserRouter>);// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

4.先来给文件名称设置别名

因为react官网默认把webpack配置暗藏起来了，须要运行npm run ejec把webpack的配置显示进去，间接运行npm run eject会报错 须要切换到根目录把仓库初始化一下后找到webpack.config.js文件中的resolve 代码贴在下方了
更改完配置文件记得重启下我的项目噢~
//根目录下运行git initgit add .git commit -m 'init'npm run eject//webpack.config.jsresolve:{    alias: {        '@': path.resolve(__dirname, '../src/'),        'views': path.resolve(__dirname, '../src/views/'),    },}

5.报错提醒# Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment varia

因为执行npm run eject关上我的项目配置 我的项目中会有提醒报错 尽管不影响代码失常运行 然而影响好看
须要正文eslintConfig中的配置即可
`
//package.json
"eslintConfig": {
"extends": [  "//react-app",  "react-app/jest"]

},`

6.这里补充一下设置别名的其余办法 第四点不倡议这么做 如果执行了npm run eject将不可逆了

这里有两种形式 亲测可用<br/>
1.应用craco命令 2.应用react-app-rewired 代码如下
1.craco形式npm install @craco/craco@7.0.0-alpha.5 -D在根目录下新建craco.config.js//craco.config.jsconst path = require('path')module.exports = {  webpack: {    alias: {      '@': path.resolve('src'),      views: path.resolve('src/views'),      common: path.resolve('src/common')    }  }}//package.json"scripts": {    "start": "craco start",    "build": "craco build",    "test": "craco test",    "eject": "react-scripts eject"  },  2.react-app-rewired  npm install customize-cra react-app-rewired -D   在根目录下新建config-overrides.js  //config-overrides.js  const webpack = require('webpack');const path = require('path');const {    override,    addWebpackAlias,} = require('customize-cra');module.exports = override(    addWebpackAlias({        '@': path.resolve(__dirname, './src'),        'views': path.resolve(__dirname, './src/views'),        'common': path.resolve(__dirname, './src/common'),    }),);//package.json"scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "test": "craco test",    "eject": "react-scripts eject"  },

重新启动运行即可

7.结语

附上gitee地址 https://gitee.com/DoraZC/reac...(不包含第六点中的代码)

后续会搭建一个拿来即用的挪动端我的项目 敬请期待吧!感激大家的收看，咱们下次见!