react脚手架创建项目,配置别名(alias)

server/2024/10/21 11:51:53/

React脚手架项目使用 react-scripts 封装了webpack配置,所以我们需要通过 config-overrides 或者 eject 的方式来修改webpack配置

可以的话 ,创建项目的时候可以使用vite  ,我这是老项目屎山 懒得迁移 ,但还得改呀 

## 1. 安装依赖 : 

npm install react-app-rewired customize-cra --save-dev

## 2. 根目录创建一个 config-overrides.js

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');module.exports = override(addWebpackAlias({['@']: path.resolve(__dirname, 'src')})
);

## 3. 修改 package.json 中的 scripts,将原本的 react-scripts 替换为 react-app-rewired

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test",
}

## 结语 : 可以在React脚手架项目中成功配置别名 @,将其指向 src 目录


http://www.ppmy.cn/server/7676.html

相关文章

AI助力科研创新与效率双提升:ChatGPT深度科研应用、数据分析及机器学习、AI绘图与高效论文撰写

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5,将人工智能的发展推向了一个新的高度。2023年4月,更强版本的ChatGPT4.0上线,文本、语音、图像等多模态交互方式使其在…

for循环的用法

for循环的用法 for 循环是一种在 Python 中用于迭代序列(如列表、元组或字符串)或其他可迭代对象的循环结构。下面是一些常见的 for 循环用法: 遍历列表:使用 for 循环遍历列表中的元素。 fruits ["apple", "b…

CSS显示模式

目录 CSS显示模式简介 CSS显示模式的分类 块元素 行元素 行内块元素 元素显示模式的转换 使块内文字垂直居中的方法 设计简单小米侧边栏(实践) CSS显示模式简介 元素显示模式就是元素(标签)以什么方式进行显示&#xff0…

毕业设计——基于ESP32的智能家居系统(语音识别、APP控制)

ESP32嵌入式单片机实战项目 一、功能演示二、项目介绍1、功能演示2、外设介绍 三、资料获取 一、功能演示 多种控制方式 ① 语音控制 ②APP控制 ③本地按键控制 ESP32嵌入式单片机实战项目演示 二、项目介绍 1、功能演示 这一个基于esp32c3的智能家居控制系统,能实…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第六套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第六套 (共9套,有答案和解析,答案非官方,未仔细校正,仅供参考) 部分题目分享,完整版获取(WX:didadidadidida313,加我备注&#x…

实时交互新篇章:WebSocket在Flutter中的应用与实践

WebSocket 协议是一个应用层协议,是一种在单个TCP连接上进行全双工通信的协议。 与传统的HTTP请求不同,WebSocket在建立连接后,双方可以随时发送消息,无需频繁地建立和断开连接。这种特性使得WebSocket成为实时应用的理想选择,如在线游戏、聊天应用和实时数据更新等。 本…

STM32 | USART实战案例

STM32 | 通用同步/异步串行接收/发送器USART带蓝牙(第六天)随着扩展的内容越来越多,很多小伙伴已经忘记了之前的学习内容,然后后面这些都很难理解。STM32合集已在专栏创建,方面大家学习。1、通过电脑串口助手发送数据,控制开发板LED灯 从题目中可以挖掘出,本次使用led、延…

开源项目-汽车租赁管理系统

哈喽,大家好,今天主要给大家带来一个开源项目-汽车租赁管理系统 汽车租赁管理系统的主要功能包括汽车管理,新闻管理,用户管理,订单管理,数据展示等模块 注:后续文章都会附上安装教程,有问题也欢迎大家评论私信。 登录 汽车管理 汽车管理可以查看所有汽车进行线上汽…