React 发现无webpack相关的配置的目录,使用eject进行创建, 安装插件需要进行配置

news2024/11/10 13:20:49

React 发现无webpack相关的配置的目录,进行创建, 安装插件需要进行配置

react脚手架将webpack相关的配置隐藏起来了,如果想要看到webpack的配置可以执行package.json文件中的一个脚本:“eject”: “react-scripts eject”,操作不可逆
在这里插入图片描述

关于eject

eject 命令是 Create React App(CRA)(脚手架)提供的一个命令,用于将项目的配置从隐藏状态“弹出”到可编辑的状态。
create-react-app文档
执行npm run eject命令会将react-scripts释放到本地项目中,可以通过修改对应的文件完成配置。同时会删除react-scripts依赖包,修改package.json中命令。命令执行完毕以后,我们就会看到本地项目中多出scriptsconfig两个目录文件。同时,package.json文件命令被修改了。
与上述图片对比
在这里插入图片描述

此时,如果在执行启动或者打包命令,就是直接执行的scripts目录下对应的文件了。我们可以很方便的根据需要修改对应的文件配置即可。

但值得注意的是,npm run eject命令是不可逆的,即执行之后不可恢复,这就造成了如果后续我们想通过脚手架的react-scripts包增加新的特性,比如PWA支持,是不可行

配置

1、使用eject命令暴露封默认的安装包解析

npm run eject

yarn eject

   这个操作是永久的,暴露出来之后无法还原
   Are you sure you want to eject? This action is permanent.

    如果原来项目有修改,那么会有提示暂存到本地的git仓库

2.暴露之后的目录以及相关内容解析

在这里插入图片描述

分析

在这里插入图片描述

在这里插入图片描述
文件夹中会新增config和scripts文件,package.json文件可以看到项目的依赖项dependemcies和 script配置发生了变化,以及添加了jest的配置

eject的副作用:

1、如果后续的cra更新了并添加了很多不错的功能,如果想应用到自己的项目中,可以通过更新cra版本来实现,而不是更新webpack的配置,但是如果已经对项目进行了eject操作,那么就无法很好的迎接未来

2、(注意) 对于代码洁癖的人来说不是很友好,因为eject之后,package.json文件会被写入很多依赖项,还有其他的脚本和配置文件

3、如果你有多个项目都是eject的,那么修改配置,可能会大量的复制粘贴,因为大多数情况下,项目的配置(比如webpack和babel)都是相同的

webpack.config.js 文件 配置less

//引入 less 文件的配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;  

替代方案

使用react-app-rewired + customize-cra或@craco/craco

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

流媒体之HLS协议(其三)

欢迎诸位来阅读在下的博文~ 在这里,在下会不定期发表一些浅薄的知识和经验,望诸位能与在下多多交流,共同努力! 江山如画,客心如若,欢迎到访,一展风采 文章目录 前期博客参考书籍一、HLS协议简…

TwinCAT3 实时核中ADS实现C++ server、clinet数据传输

一、基本概念 ADS :Automation Device Specification,ADS设备间进行通信的协议规范。协议定义了ADS device之间如何寻址对方、ADS device之间可以执行哪些操作、执行这些操作需要哪些参数,以及操作完成后如何返回结果等。从编程角度看&#…

SVM 监督学习

一、分类问题 利用一条直线分类存在很多问题 二、SVM 支持向量机 其核心思想是通过在特征空间中找到一个最优的超平面来进行分类,并且间隔最大。分类面尽可能远离样本点,宽度越大越好。 适用于中小型复杂数据集的分类。 三、硬间隔和软间隔 硬&#x…

Android Studio -> Android Studio 获取release模式和debug模式的APK

Android Studio上鼠标修改构建类型 Release版本 激活路径:More tool windows->Build Variants->Active Build Variant->releaseAPK路径:Project\app\build\intermediates\apk\app-release.apk Debug版本 激活路径:More tool w…

linux上使用rpm的方式安装mysql

1.从mysql官网上下载需要的版本,根据操作系统版本,CPU架构,下载让rpm bundle,这个版本是个完整版,包含其他所有版本 上传到服务器的一个目录,进行解压 执行tar -xvf mysql*.tar tar -xvf mysql*.tar 2.卸载老版本m…

【Canvas与电脑桌面】用六角回旋镖铺满一个平面(1920*1080)

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>六角回旋镖桌面1920x1080</title><style type"text/cs…

动手学深度学习(pytorch)学习记录27-深度卷积神经网络(AlexNet)[学习记录]

目录 创建模型读取数据集训练AlexNet AlexNet 是由 Alex Krizhevsky、Ilya Sutskever 和 Geoffrey Hinton 在 2012 年提出的深度卷积神经网络&#xff0c;它在当年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中取得了显著的成绩&#xff0c;从而引起了深度…

动手学深度学习(pytorch土堆)-02TensorBoard的使用

1.可视化 代码使用了 torch.utils.tensorboard 将数据记录到 TensorBoard 以便可视化。具体来说&#xff0c;它将标量数据记录到目录 logs 中&#xff0c;使用的是 SummaryWriter 类。 代码分解如下&#xff1a; SummaryWriter("logs")&#xff1a;初始化一个 Ten…

常用的 git命令的使用

一. 简介 本文简单学习一下&#xff0c;在从远程仓库中拉取代码&#xff0c;或者向远程仓库提交代码时&#xff0c;经常用到的一些 git命令。 二. git的其他命令的使用 1. 重新提交代码的命令 当已经提交过一笔代码&#xff0c;并经过了 CI自动化编译通过。这时可能发现…

WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、client,offset

文章目录 一、 DOM事件1. 事件监听2. 事件类型(1)、鼠标事件(2)、焦点事件(3)、键盘事件(4)、文本事件 3. 事件对象(1)、获取事件对象(2)、事件对象常用属性 4. 环境对象 this5. 回调函数 二、 DOM事件进阶1. 事件流(1)、 捕获阶段(2)、 冒泡阶段(3)、 阻止冒泡(4) 、阻止元素默…

python绘制3D瀑布图

成品&#xff1a; 代码&#xff1a; def line_3d(x, y, z, x_label_indexs):"""在y轴的每个点&#xff0c;向x轴的方向延伸出一个折线面&#xff1a;展示每个变量的时序变化。x: x轴&#xff0c;时间维&#xff0c;右边。y: y轴&#xff0c;变量维&#xff0c;…

前端:JavaScript 实现类

文章目录 1. Es6-类-class2. Es6-class 实现继承3. Es6-class 静态属性和私有属性4. Es5-寄生组合式继承 1. Es6-类-class 类是创建对象的模板&#xff0c;用代码封装数据以处理该数据&#xff0c;js中的类建立在原型上。 如何定义类&#xff0c;首先需要关键字 class&#x…

C++之打造my vector篇

目录 前言 1.参照官版&#xff0c;打造vector的基本框架 2.丰富框架&#xff0c;实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸&#xff0c;深度理解代码 迭代器…

iText2KG:显著降低LLM构建知识图谱时的幻觉现象

1. 当前知识图谱构建存在的问题 知识图谱通过捕捉实体之间的关系来构建知识的结构化表示&#xff0c;在分析文本数据集和从结构化异构数据中推断知识方面具有显著优势。比如&#xff0c;知识图谱能够融合来自多个来源的不同数据&#xff0c;提供一个具有凝聚力的信息视角。还能…

【Python进阶】学习Python从入门到进阶,详细步骤,就看这一篇。文末附带项目演练!!!

详细的Python学习路线 1. Python基础 Python安装和环境配置&#xff1a;学习如何在你的操作系统上安装Python&#xff0c;并配置开发环境。变量和数据类型&#xff1a;学习如何定义变量&#xff0c;以及Python中的基本数据类型&#xff0c;如整数、浮点数、字符串等。 Pytho…

【人工智能学习笔记】4_3 深度学习基础之循环神经网络

循环神经网络(Recurrent Neural Network, RNN) 是一类以序列(sequence)数据为输入,在序列的演进方向进行递归(recursion)且所有节点(循环单元)按链式连接的递归神经网络(recursive neural network),循环神经网络具有短期记忆能力 RNN核心思想 RNN的结构 一个典型…

基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行

直接看视频: 基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行_哔哩哔哩_bilibili 模型: 有效提取径流时间序列的信息特征,提高径流预测模型的高维非线性拟合能力和预测性能的稳定性,将卷积神经网络(CNN),双向长短期记忆网络(BiLSTM)和注意力机制(attention)相…

tomcat端口被占用解决方法

在安装目录的conf下修改server.xml文件&#xff0c;修改后保存重启即可

十四、MySQL高级— 分库分表(7)

&#x1f33b;&#x1f33b; 目录 一、分库1.1 修改配置 schema.xml1.2 如何选择分库表1.3 SQLyog 连接 mycat 二、水平分表2.1 schema.xml2.2 rule.xml2.3 跨库join2.3.1 ER表2.3.2 全局表 2.4 全局序列2.4.1 本地文件2.4.2 数据库方式(一般都用这个)2.4.3 时间戳方式2.4.4 自…

时间序列预测学习方向总概括

推荐资源&#xff1a; 1.MA、AR、ARIMA 算法小陈-CSDN博客 2.informer论文讲解 【2024最火的两个模型&#xff1a;InformerLSTM两大时间序列预测模型&#xff0c;论文精读代码复现&#xff0c;究极通俗易懂&#xff01;——人工智能|AI|机器学习|深度学习-哔哩哔哩】 https…