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

embedded/2024/9/22 19:29:59/

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/embedded/13647.html

相关文章

JavaScript 模块导出示例

JavaScript 模块导出示例说明 在 JavaScript 中,我们可以通过 export 关键字将模块中的功能导出,以供其他模块使用。导出可以是单个默认值,也可以是多个命名值。本文将分别介绍导出单个值和导出多个值的示例说明。 导出单个值 当模块中只有…

springboot结合elasticJob

先说一说什么是elasticJob。 ElasticJob是一个分布式任务调度的解决方案,它由俩个相互独立的子项目Elastic-job-lite和Elastic- job-cloud组成。 任务调度:是指系统为了自动完成特定任务,在任务的特定时刻去执行任务的过程。 分布式&#xf…

LoRa技术在无人机数据链上的应用,无人机集群使用LoRa技术的优缺点分析

LoRa(Long Range)技术是一种用于远程通信的低功耗广域网(LPWAN)技术,具有覆盖范围广、功耗低、抗干扰能力强等特点。在无人机数据链上,LoRa技术的应用可以带来许多优势。 首先,LoRa技术能够提供…

【Linux】日志分析与管理

作为一个运维,如果不会看日志,就好比是冬天刚刚用热水泡完了脚,接着就立马让人把水喝掉。 目录 一、Inode介绍 1.1 什么是inode 1.2 inode表内容 1.3 查看inode号的方式 二、日志分析 2.1 日志的用途 2.2 日志的分类 2.3 日志级别 2…

武汉星起航:深耕亚马逊,一站式孵化新手,开启跨境新篇章

在全球经济一体化的时代背景下,跨境电商行业以其独特的优势,正成为推动经济增长的新引擎。武汉星起航电子商务有限公司,作为一家专注于自营亚马逊跨境电商及亚马逊卖家孵化服务的公司,凭借创始人张振邦先生深厚的电子商务运营经验…

浏览器原理 之 浏览器安全

一 什么是 XSS 攻击? 如何防御 XSS 攻击? XSS 攻击,即跨站脚本攻击(Cross-Site Scripting),是一种常见的网络安全漏洞,它允许攻击者将恶意脚本注入到其他用户浏览的正常网页中。这些恶意脚本通…

大坝安全监测GNSS接收机:保障水库安全

大坝安全一直是社会关注的焦点之一。为了及时监测大坝的变形和位移情况,以预防可能发生的危险事故,GNSS接收机成为了不可或缺的仪器之一。本文将详细介绍GNSS接收机在大坝安全监测中的应用及其重要性。 一、GNSS接收机是什么 GNSS全球导航卫星系统&…

Java 的 Apache Commons 工具库 助力开发

Apache Commons 是什么? Apache Commons 是由 Apache 软件基金会提供的一系列开源、高质量的 Java 组件集合。它包含了各种常用的、经过严格测试的工具类,弥补了 Java 标准库在功能上的不足。这些组件广泛应用于字符串处理、数据转换、集合操作、文件处…