关于react.js:react18-createreactapp系列

前言

最近在学习 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-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 将不可逆了

这里有两种形式 亲测可用 <br/>
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"
  },

重新启动运行即可

7. 结语

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

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