❤ React18 环境搭建项目与运行（地址已经放Gitee开源--新体系为webpack搭建）_运行react18 node版本

❤ React项目搭建与运行

源码地址

记得给个star呀伙伴
Github（https://github.com/NexusLin/NexusReact）
Gitee（https://gitee.com/NexusLinNoa/NexusReact）
环境介绍

node v20.11.0
react 18.2
react-dom  18.2.0
1
2
3

一、React环境搭建

第一种普通cra搭建

1、检查本地环境

node版本 18.17.0

检查node和npm环境
node -v
npm -v

2、安装yarn

npm install -g yarn
yarn --version

3、创建一个新的React项目

npx create-react-app ltbreact

4、进入并运行项目

// 进入项目
cd my_react
// 启动项目
yarn start项目启动成功，在浏览器 输入 http://localhost:3000/ 即可访问react

5、尝试打包

yarn build打包完成以后能在我们项目里面看到一个包

6、下载插件(安装xxx 插件 )

yarn add 插件名称

二、第二种方式vite搭建

1、检查本地环境

node版本 18.17.0
检查node和npm环境
node -v
npm -v

2、安装yarn

npm install -g yarn
yarn --version

3、使用vite创建一个新的React项目

npm create vite@latest 第一种版本

yarn create vite ltbreact --template react-ts  //node大于20.0.0 才可以使用

yarn create vite ltbreact --template react-js 
1
2
3
4
5

4、进入并运行项目

// 进入项目
cd my_react

//安装依赖
yarn

// 启动项目
yarn start (之前的)
yarn dev项目启动成功，在浏览器 输入 ​​ http://localhost:​​5173/​ 即可访问react

5、尝试打包

yarn build打包完成以后能在我们项目里面看到一个包

6、下载插件(安装xxx 插件 )

yarn add 插件名称

三、项目信息配置

1、项目目录

打开Vite构建的项目，项目的目录结构如下：

.
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13

2、配置resolve.alias 文件导入路径别名

简单介绍一下：
resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：

在项目的 vite.config.ts 之中配置：

默认跟文件为显示src的目录
默认跟组件目录为

// vite.config.ts
import {
    defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [react()],
  resolve: {
   
    alias: {
   
      '@': path.resolve(__dirname, './src')
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

虽然配置好了@但是输入@没有提示，找到tsconfig.json

配置 tsconfig.json

// tsconfig.json
{
   
  "compilerOptions": {
   
    "paths": 
1
2
3
4
5