create-react-app完整配置别名alias方法

在使用 create-react-app 创建的项目中配置路径别名,可以使用 react-app-rewired 这个库来覆盖 create-react-app 的默认配置。以下是配置步骤和示例:

在项目根目录中安装 react-app-rewired:

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

在项目根目录中创建一个 config-overrides.js 文件,用于自定义配置。

在 config-overrides.js 文件中,使用 paths.alias 配置别名:

const path = require('path');
 
function resolve(dir) {
  return path.join(__dirname, '.', dir);
}
 
module.exports = function override(config, env) {
  // 配置别名
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      '@components': resolve('src/components'),
      // 添加更多别名
    },
  };
 
  return config;
};

修改 package.json 中的启动脚本,使用 react-app-rewired 代替 react-scripts 启动项目:

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

现在,你可以在项目中使用配置的别名来导入模块了,例如:

import SomeComponent from '@components/SomeComponent';

这样,@components/SomeComponent 就会被解析为 src/components/SomeComponent 文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/609413.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

定制聚四氟乙烯砂芯抽滤装置

聚四氟乙烯布氏漏斗及其抽滤装置,是实验室中使用的一种仪器,用来使用真空或负压力抽吸进行过滤。 布氏漏斗形状为扁圆筒状,圆筒底面上开了很多小孔。下连一个狭长的筒状出口。 使用的时候,一般先在圆筒底面垫上滤纸,…

使用PyTorch实现L1, L2和Elastic Net正则化

在机器学习中,L1正则化、L2正则化和Elastic Net正则化是用来避免过拟合的技术,它们通过在损失函数中添加一个惩罚项来实现。 正则化介绍 L1 正则化(Lasso回归): L1 正则化通过向损失函数添加参数的绝对值的和来实施惩…

JavaScript异步编程——07-Promise实例的方法【万字长文,感谢支持】

Promise 实例的方法简介 Promise 的 API 分为两种: Promise 实例的方法(也称为:Promis的实例方法) Promise 类的方法(也称为:Promise的静态方法) Promise 实例的方法:我们需要实…

Go 单元测试完全指南(一)- 基本测试流程

为什么写单元测试? 关于测试,有一张很经典的图,如下: 说明: 测试类型成本速度频率E2E 测试高慢低集成测试中中中单元测试低快高 也就是说,单元测试是最快、最便宜的测试方式。这不难理解,单元…

游戏工作室如何利用惯性动作捕捉技术制作动画?

随着动捕设备不断进步和游戏行业的发展,惯性动作捕捉技术在游戏开发领域逐渐普及。惯性动作捕捉技术,可以精准捕捉现实世界中的真人动作,并将其精准应用于虚拟角色上,使游戏中的角色动作可以呈现出更写实、逼真和沉浸感&#xff0…

【机器学习300问】80、指数加权平均数是什么?

严格讲指数加权平均数并不是机器学习中的专有知识,但他是诸多梯度下降优化算法的基础,所有我打算专门写一篇文章来介绍这种计算平均数的方法。还是老规矩,首先给大家来两个例子感受一下什么是指数加权平均数。 一、两个例子感性理解什么是指…

【Spring源码分析】ResolvableType

【Spring源码分析】ResolvableType 参考 目录 文章目录 【Spring源码分析】ResolvableType一、ParameterizedType 参数化类型&#xff0c;即泛型&#xff1b;例如&#xff1a;List< T>、Map< K,V>等带有参数化的对象;二、GenericArrayType—— 泛型数组 泛型数组…

竖排文字识别原理与实践操作方法

在当今数字化时代&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术已经广泛应用于各个领域&#xff0c;特别是在文档处理方面&#xff0c;OCR软件能够帮助用户快速将纸质文档转化为可编辑的电子文档。然而&#xff0c;对于竖…

day-31 给植物浇水 II

思路 用两个变量start和end记录浇水位置&#xff0c;当前剩余水量大于需要浇水量时&#xff0c;进行浇水并前进一步&#xff0c;否则需要返回加水&#xff08;即重新灌满水罐的次数1&#xff09; 解题方法 用while&#xff08;start<end&#xff09;进行上述循环&#xff0…

【Spark】Spark编程体验,RDD转换算子、执行算子操作(六)

Spark编程体验 项目依赖管理 <dependencies><dependency><groupId>org.scala-lang</groupId><artifactId>scala-library</artifactId><version>2.12.10</version></dependency><dependency><groupId>org.ap…

数据库干货:推荐一款非常好用的 SQL Server管理工具

目录 2.1 SQL 编码辅助 2.2 表设计器 2.3 数据库设计器 2.4 模式比较 2.5 文档生成工具 2.6 数据导出和数据导入 2.7 源代码控制 2.8 监控工具 2.9 索引管理器 2.10 T-SQL 调试器 2.11 单元测试 一、软件简介 dbForge Studio 2019-2022 for SQL Server是针对SQL Serv…

Codeforces Round 943 (Div. 3)----B题题解

本题是很显然的双指针算法&#xff0c;一直移动&#xff0c;直达不匹配为止 #include <iostream> #include <vector> #include <string> #include <algorithm> using namespace std;const int N 200010; int t,n,m; char a[N],b[N];int main(void) {…

【国产SSL】哪家SSL证书可以保证数据不出境,是在国内验签

随着网络安全的重视&#xff0c;网站安装SSL证书已经是标配了。但是为什么目前常见的SSL证书都是国外的&#xff1f;数据受国外掌控&#xff0c;安全吗&#xff1f;那么哪家国产品牌是可以保证数据不出境的呢&#xff1f; 为什么目前常见的SSL证书都是国外的&#xff1f; 原因…

AI图书推荐:给自媒体创作者的ChatGPT使用指南

你是否厌倦了花费数小时盯着空白屏幕&#xff0c;努力为你的内容想出新鲜点子&#xff1f;想要将你的写作提升到下一个水平&#xff1f;有了ChatGPT&#xff0c;你可以告别写作障碍、无休止的修订和浪费的时间。 在这本全面的指南中&#xff0c;你将学到关于ChatGPT你需要知道…

BigInteger和BigDecimal类

BigInteger 和 BigDecimal 介绍 应用场景 BigInteger适合保存比较大的整型BigDecimal适合保存精度更高的浮点型&#xff08;小数&#xff09; BigInteger 和 BigDecimal 常见方法 1&#xff0c;add 加2&#xff0c;subtract 减3&#xff0c;multiply 乘4&#xff0c;divide…

2024年人工智能威胁态势报告:有关AI系统及AI应用的安全风险与安全防护全景

HiddenLayer公司最新发布的《2024年AI威胁场景报告》中&#xff0c;研究人员阐明了AI相关漏洞及其对组织的影响&#xff0c;并为应对这些挑战的IT安全和数据科学领导者提供了指导建议。最后&#xff0c;报告还揭示了各种形式的AI安全控制的前沿进展。 关键数据 平均而言&#x…

1. 介绍 Matplotlib

目录 1. Matplotlib 介绍 2. Matplotlib 安装介绍 3. Matplotlib 使用介绍 本专栏想分享一下最近学到的深度学习知识&#xff0c;前期需要一些 Python 知识和数据分析知识&#xff0c;如果有同学没有了解&#xff0c;请先看下面两个专栏&#xff0c;谢谢&#xff01; Pytho…

Ubuntu 网卡启动及配置

文章目录 问题分析查看网卡信息启动网卡 配置网卡应用更改 参考 问题分析 打开虚拟机后发现没有网卡网络。 查看网卡信息 sudo ip link set ens33 up得到本机的所有网卡信息&#xff0c;例如我这边网卡为ens33 启动网卡 启动网卡后发现依然网卡没有IP地址。 配置网卡 u…

【异常检测】新版异常检测库anomalib的使用

every blog every motto: There’s only one corner of the universe you can be sure of improving, and that’s your own self. https://blog.csdn.net/weixin_39190382?spm1010.2135.3001.5343 0. 前言 异常检测库anomalib的使用 1. 前提 1.1 数据组织形式 说明&#…
最新文章