dependencies 和 devDependencies 的区别,安装包的时候,怎么做判断

package.json 文件中,dependenciesdevDependencies 用于指定项目的依赖包,但它们有不同的用途:

dependencies

  • 用途:包含项目运行时所需的依赖包。这些依赖在生产环境中是必需的。
  • 示例vue, element-plus 等前端库,或者后端项目中的 express, mongoose 等。

devDependencies

  • 用途:包含项目开发时所需的依赖包。这些依赖仅在开发环境中使用,不会在生产环境中部署。
  • 示例:构建工具(如 vite, webpack),代码格式化工具(如 prettier, eslint),测试框架(如 jest, mocha)等。

如何决定安装到哪个依赖中?

  1. 开发工具和构建工具:如果是用于代码编译、打包、测试或格式化的工具,通常安装到 devDependencies
  2. 运行时依赖:如果是项目运行时需要用到的库或框架,比如 Vue, React, Axios 等,则应该安装到 dependencies
  3. 安装命令
    • 安装到 dependenciesnpm install package-nameyarn add package-name
    • 安装到 devDependenciesnpm install package-name --save-devyarn add package-name --dev

sass 错误安装在dependencies的列子

在使用 Vue 和 Vite 开发项目时,会使用 sass 作为 CSS 预处理器来编写更加灵活和可维护的样式代码。
然而,一个常见的错误是将 sass 错误地添加到项目的 dependencies 中,而不是 devDependencies。
这可能会导致一些问题,例如增加生产环境的包大小和潜在的构建问题。

例如,项目 package.json 文件中的依赖项可能如下所示:

"dependencies": {"element-plus": "^2.6.3","sass": "^1.72.0","vue": "^3.4.21"
}

在这种情况下,sass 被错误地放置在了 dependencies 中。

为什么这是一个问题?

dependencies 应该只包含项目在生产环境中运行时所需的包。
而 sass 实际上是一个开发工具,只在开发环境中用于编译 SCSS 文件。
将 sass 放在 dependencies 中意味着它也会被包含在生产环境的构建中,这是不必要的,可能会增加构建大小和复杂性。

解决方案

要解决这个问题,需要将 sassdependencies 移动到 devDependencies
可以通过以下步骤在命令行中完成:

  1. 首先,卸载 sass

    npm uninstall sass
    
  2. 然后,将 sass 安装到 devDependencies

    npm install sass --save-dev
    

完成这些步骤后,package.json 应该会更新,将 sass 放在 devDependencies 中,如下所示:

"devDependencies": {"sass": "^1.72.0",...
}

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

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

相关文章

Scrapy数据解析(XPath、CSS)

Scrapy数据解析(CSS、XPath) 在Scrapy中原有的解析语法与原来的有点略微的区别 目录 Scrapy数据解析(CSS、XPath)CSS解析器XPath解析器 CSS解析器 示例: response.css(a)返回的是selector对象response.css(a).extract()返回的是a标签对象response.css(a::text).…

蓝桥杯 基础练习 01字串

资源限制 内存限制:256.0MB C/C时间限制:1.0s Java时间限制:3.0s Python时间限制:5.0s 问题描述 对于长度为5位的一个01串,每一位都可能是0或1,一共有32种可能。它们的前几个是: 00000…

2024/4/2—力扣—栈的最小值

代码实现: typedef struct node {int val;struct node *next; } Node;typedef struct {struct node *top;int min; } MinStack;/** initialize your data structure here. */MinStack* minStackCreate() {MinStack *obj malloc(sizeof(*obj));obj->top NULL;ob…

爬虫 新闻网站 以湖南法治报为例(含详细注释) V1.0

目标网站:湖南法治报 爬取目的:为了获取某一地区更全面的在湖南法治报已发布的宣传新闻稿,同时也让自己的工作更便捷 环境:Pycharm2021,Python3.10, 安装的包:requests,csv&#xff…

【Java集合进阶】泛型的通配符和综合练习

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(七)- 向量算术指令格式

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容: 这是一份关于向量扩展的详细技术文档,内容覆盖了向量指令集的多个关键方面,如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

Nginx-调度器、优化

Nginx调度器 一、HTTP调度 1、反向代理语法格式 http {upstream webserver { # 定义源服务器组#ip_hash;server 192.168.88.100:80 weight2;server 192.168.88.200:80 down;server 192.168.88.101:80 max_fails2 fail_timeout30;}server {listen 80;server_name _…

Mysql底层原理六:InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1)建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

怎么将静图变成gif?告诉你三步快速制作

想要将jpg格式的静图变成gif格式的动图时要怎么操作呢?在这个飞速发展的数字媒体时代,经常会在网络上分享有趣的动态图片。当我们想要将自己手中的jpg图片变成gif动图的时候怎么实现呢?很简单,通过使用gif图片制作(htt…

Vue 打包自动清理缓存

在Vue开发中遇到打包部署之后总是要手动清除浏览器缓存数据的问题,此问题可以用下方式: 1、package.json文件中有一个管理版本号属性:version,在我们每次打包部署之前修改当前版本号 2、在入口文件main.js文件中,加入版…

windows环境下实现ffmpeg本地视频进行rtsp推流

摘要:有时候服务端(如linux)或者边缘端(jetson盒子)需要接受摄像头的视频流输入,而摄像头的输入视频流一般为rtsp,测试时需要搭建摄像头环境,很不方便,因此需要对本地视频…

YOLOV8注意力改进方法:DoubleAttention(附代码)

原论文地址:原论文地址 DoubleAttention网络结构的优点在于,它能够有效地捕获图像中不同位置和不同特征的重要性,从而提高了图像识别和分割的性能。 论文相关内容介绍: 论文摘要:学习捕捉远程关系是图像/视频识别的…

springboot系列-api接口请求实现

springboot HTTP请求接口实现 基于springboot 2.6.6 代码地址&#xff1a;github仓库地址 更多系列教程请关注公众号’coderlike’ 如果觉得有帮助希望能关注下公众号 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b…

PyCharm 2024.1 版本带来了一系列重要的更新和新特性

Hugging Face 模型和数据集的文档预览&#xff1a; 可直接在 IDE 中查看 Hugging Face 模型和数据集的文档&#xff0c;无需离开编辑环境。 本地全行代码补全&#xff1a; 对于前端框架&#xff0c;如 JavaScript 和 TypeScript&#xff0c;PyCharm 现在支持基于机器学习的全行…

魔众 文库配置异步转换

同步转换 系统默认使用同步转换&#xff0c;即用户上传文档提交接口瞬间&#xff0c;系统会立即进行转换。 同步转换容易造成页面卡顿&#xff0c;转换时间超长的情况下&#xff0c;系统接口会超时。 异步转换 系统支持异步转换&#xff0c;即用户上传文档提交接口瞬间&…

【算法】合并两个有序数组 - 双指针

题目 两个有序整数数组 nums1 和 nums2 及他们的元素个数 m、n&#xff0c;将 nums2 合并到 nums1 中&#xff0c;结果依然有序。 nums1 长度默认为 m n&#xff0c;没有元素的位置用 0 补齐。 原理 定义三个指针&#xff0c;分别指向 nums1 的最大元素(p1)、nums2 的最大元…

Elasticsearch索引之嵌套类型:深度剖析与实战应用

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! Elasticsearch是一个基于Lucene的搜索服务器&#xff0c;它提供了一个分布式、多租户能力的全文搜索引擎&#xff0c;并带有一个基…

烧坏两块单片机,不知道原因?

没有看你的原理图&#xff0c;以下是造成烧毁芯片的几个环节&#xff1a; 1. 最大的可能性是你的单片机电机控制输出与电机驱动电路没有隔离。 我的经验&#xff0c;使用STM32控制电机&#xff0c;无论是直流电机脉宽调制&#xff0c;还是步进电机控制&#xff0c;控制电路与…

libpcap抓包的原理是什么?

libpcap是一个开源库&#xff0c;用于捕获计算机网络上的数据包。它是网络数据包捕获的事实标准&#xff0c;并被许多工具使用&#xff0c;包括Wireshark和Tcpdump。libpcap的工作原理可以概括为以下几个关键点&#xff1a; 用户空间数据包捕获&#xff1a;libpcap在用户空间运…

PCA算法(Principal Component Analysis)揭秘

经典PCA算法 PCA算法的应用包括降维、有损数据压缩、特征抽取、数据可视化等。目前PCA算法有两个通用定义&#xff0c;能殊途同归&#xff0c;得到相同的结果。一方面&#xff0c;我们可以用正交投影来定义PCA&#xff0c;即将数据投影到更低维的线性子空间&#xff0c;也被称…