react18|react18 create-react-app系列 react18create-react-app系列

文章图片

前言
最近在学习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( ); // 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-vitals reportWebVitals();

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

由于react官方默认把webpack配置隐藏起来了，需要运行npm run ejec把webpack的配置显示出来，直接运行npm run eject会报错需要切换到根目录把仓库初始化一下后找到webpack.config.js文件中的resolve 代码贴在下方了
更改完配置文件记得重启下项目噢~

//根目录下运行 git init git add . git commit -m 'init' npm run eject //webpack.config.js resolve:{ 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将不可逆了

这里有两种方式亲测可用

1.使用craco命令 2.使用react-app-rewired 代码如下

1.craco方式 npm install @craco/craco@7.0.0-alpha.5 -D 在根目录下新建craco.config.js //craco.config.js const 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" },

【react18|react18 create-react-app系列】重新启动运行即可
7.结语