关于npm i 的那点事

news2024/11/18 9:43:47

在我们开发中会经常用到npm i 这个命令,有npm i -S,npm i -g , npm i -D,npm install --save-dev, npm i -save,那么这几种命令到底有什么区别呢?

要先知道这几种命令的区别,我们首先要认识两个单词,分别是dependencies和devDependencies。

dependencies:是生产和开发都会用到的依赖包,会被打包到项目中。

devDependencies:是只在开发环境中使用的依赖包,不会被打包到项目中。

下面我会放一张用package.json的默认图,然后分别运行npm i -S、npm i -save、npm i -D、npm i --save-dev来看他们分别有什么区别:

 

npm i -S

 我们以安装echarts为例:

 可以发现,安装在了dependencies下,也就是生产和开发都会用到。

npm i -save

通过图片我们可以发现,npm i -save 下载的依赖包也是在dependencies中的。

也就是说npm i -S 和 npm i -save是等价的,下载的依赖包都是在dependencies中,也就是开发和生产都会用到。

npm i -D

 

npm i -D执行后,安装在了devDependencies中,也就是只有开发环境使用。

npm i --save-dev

 

可以发现,依然安装在了只有开发环境使用的devDependencies中。

npm i

 

总结

  1. npm i -S(-save)下载的依赖包是安装在dependencies中,生产和开发环境都会使用

  2. npm i -D(--save-dev)下载的依赖包安装在devDenpendencies中,只有在开发环境中使用

  3. npm i -g  是把模块安装到全局,不会在项目的node包中保存,也不会将注入dependencies和devDependencies中。

  4. npm i 的话,是安装在dependencies中,也就是说生产和开发都会用到。

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

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

相关文章

vue3的tsx写法(v-show、v-if、v-for、v-bind、v-on),父子组件传值

1、如下就是vue3的tsx写法&#xff0c;tsx写法中支持使用v-show&#xff0c;如下&#xff1a; import {ref} from vuelet appData ref<string>(); let flag false; const renderDom () > {return (<div><input type"text" v-model{appData.val…

详细教会你在vue中写jsx

目录 前言&#xff1a; 一、用render函数写一个页面&#xff1a; 二、在render函数注册事件 三、vue指令在render函数是怎么代替的&#xff1a; 1、v-if 2、v-show 3、v-for: 4、v-model&#xff1a; 5、.sync 四、render中插槽的使用 1、默认插槽 2、具名插槽 3、作…

Less预处理——初识Less

系列文章目录 文章目录系列文章目录一、Less 简介二、安装 Easy LESS三、第一个小例子一、Less 简介 Less 是一门 CSS 预处理语言&#xff0c;它扩充了 CSS 语言&#xff0c;增加了诸如 变量、混合&#xff08;mixin&#xff09;、函数 等功能&#xff0c;让 CSS 更易维护、方…

react-router-dom V6

目录 1. 前言 2. 变更概览 将 Switch 升级为 Routes 路由匹配组件参数 由 component 改为 element 相对路径识别&#xff08;子路由不需要补全父路由的path&#xff0c;react会自动补全&#xff09; 用 useNavigate 替代 useHistory 废弃 Redirect 标签&#xff0c;使…

Vue基础笔记

创建一个Vue应用 1.应用实例 每个Vue应用都是通过createApp函数创建一个新的应用实例 import { createApp } from vue const app createApp({ //根组件选项}) 2.根组件 若使用的是单文件组件&#xff0c;可直接从另一个文件中导入根组件 import {createApp } from vue import …

Vue3通透教程【十】跨级组件通讯—依赖注入

文章目录&#x1f31f; 写在前面&#x1f31f; provide函数&#x1f31f; inject 函数&#x1f31f; 跨组件通讯&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相…

java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener的一个独特解决方法

除了网上所说的各种类型的解决方案&#xff0c;还有一种解决方案。 1、在pom.xml中添加一句 <packaging>war</packaging> 2、重新配置tomcat&#xff0c;选择war 3、确保web的路径是对的 file-->project structure 如果3处标红了 改为web文件夹的正确路径即可…

html网站video标签blob视频如何下载

在淘宝或tdtu知乎等有时想下载里面的视频资源&#xff0c;看了一下视频标签里的video不是MP4格式url,而是bloburl的方式。 是blob:https并不是一种协议&#xff0c;而是html5中blob对象在赋给video标签后生成的一串标记&#xff0c;blob对象对象包含的数据&#xff0c;浏览器内…

v-model的双向数据绑定实现原理(附:案例和项目实例)

一. 前言。 相信对使用vue框架的童靴来说&#xff0c;v-model的使用都能信手沾来&#xff0c;熟悉的不能再熟悉&#xff0c;也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定&#xff0c;很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目…

Npm link的作用与使用

一、为什么要用Npm link 库包在开发或迭代后&#xff0c;不适合发布到线上进行调试&#xff08;过程繁琐且会导致版本号膨胀&#xff09; 二、Npm link工作原理 npm link 可以帮助我们模拟包安装后的状态&#xff0c;它会在系统中做一个快捷方式映射&#xff0c;让本地的包就…

前端实战|React18项目启动——pc端极客园项目前置准备

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

web前端作业--响应式美食菜谱网页设计(HTML+CSS+JavaScript+)实现

原始HTMLCSSJS页面设计, web大学生网页设计作业源码&#xff0c;这是一个不错的美食菜谱网页设计制作&#xff0c;非常适合初学者学习使用。 网页实现截图&#xff1a;文末获取源码 网站首页&#xff1a; 菜谱&#xff1a; 美食达人&#xff1a; 手机版效果&#xff1a; 主要…

echarts如何画地图

前情提要 用echarts画地图的方式有两种 通过真实的地图来画(百度地图、google地图、或者其它某种地图软件)去拿到某块区域的json文件来画第一种方式,可以前往 https://blog.csdn.net/glorydx/article/details/127656301查看具体如何实现 echarts 获取json文件来画地图 如…

Web of science简单使用

下面本人以使用经历简单介绍下该数据库使用&#xff0c;鉴于登录地址/学校端口等原因&#xff0c;页面信息会有出入&#xff0c;有不足之处还望大家多多补充哈&#xff08;o^o&#xff09;&#xff01; 一&#xff0e;登录方式 1.高校官网&#xff08;内网&#xff09;-图书馆…

史上无敌的超级详细的Node Js 环境搭建步骤

今日分享内容 一、Node Js 环境搭建 1、Node.js是什么&#xff1f; 2、npm是什么&#xff1f; 3、环境搭建步骤: 二、Element简介 一、Node Js 环境搭建 1、Node.js是什么&#xff1f; Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱…

前端学习之HTML

目录 1. 什么是HTML&#xff1f; 2. HTML专业的开发工具有哪些&#xff1f; 3. 是谁制定了HTML? 4. HTML的简单特性 5. 基本标签的介绍 6. 表格 7. 表格中单元格的合并 8. 背景颜色和背景图片 9. 图片 10. 超链接 11.列表 12. Form表单*** 1. 什么是HTML&#xff1f…

vue3版本网页小游戏

目录 1.前言 2.实现过程 2.1目录 2.2文件介绍 3.核心逻辑分步骤详解 4.总结 1.前言 最近火爆全网的羊了个羊小程序&#xff0c;背景是根据官方介绍&#xff0c;“羊了个羊”是一款闯关消除小游戏&#xff0c;通关率不到0.1%。主要玩法为重叠的各类方块&#xff0c;需要在…

CSS选择器(nth-child)

:nth-child()这个选择符括号内可以写/- an b &#xff08;a&#xff0c;b均为整数&#xff09;或者关键字 因为工作中有遇到要隐藏列表第三个子元素之后的所有子元素&#xff0c;所以有用到这个选择器&#xff0c;记录一下 (1) nth-child(a) 当括号里只写一个数字&#xff…

元素垂直居中的五种方式

元素内容垂直居中 本文介绍&#xff1a; 元素标签内的内容垂直居中有两种思路&#xff0c; 第一种思路是将元素内容利用行高或者内边距padding属性设置 第二种思路是子盒子在父盒子中垂直居中&#xff0c;利用flex布局或者position定位方式 五种方式实现元素内容垂直居中第一种…

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)

前言 最近在写 echarts 的时候碰到了这么一个报错&#xff0c;如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化&#xff0c;下面几种方法是经本人自测最有效的解决方案。 报错截图 解决方案&#xff1a; 1. this.$nextTick 该方法思路是将回调延迟…