npm install中-S与-D参数的区别及package.json配置详解

作者:知秋时间:2026-10-31 10:47:21浏览:618

本文详细解析npm install命令中-S(--save)与-D(--save-dev)参数的具体作用。通过实例说明如何将依赖包写入package.json的dependencies或devDependencies字段,区分生产环境与开发环境依赖,并提供判断使用场景及官网查询方法。

在使用npm install命令时,是否添加-S或-D参数均可,但建议显式添加,以提升配置的语义清晰度。

以下通过具体示例进行说明:

1、-S参数

npm i jQuery -S  
就等于 
npm i jQuery --save

注意事项:

  • i是install的简写
  • 后续跟随的-S(或--save)参数表示将安装的第三方包(如示例中的jQuery)记录在package.json文件的dependencies字段中,相关代码如下:
"dependencies":{
      "jQuery":"^3.6.0"   //3.6.0是jQuery的版本号
}

2、-D参数

npm i webpack@5.42.1 webpack-cli@4.7.2 -D
就等于
npm i webpack@5.42.1 webpack-cli@4.7.2 --save-dev

注意事项:

  • 后续跟随的-D(或--save-dev)参数表示将安装的第三方包(如示例中的webpack和webpack-cli)记录在package.json文件的devDependencies字段中,相关代码如下:
"devdependencies":{
      "webpack":"^5.42.1",
      "webpack-cli":"^4.7.2"
}

3、dependencies表示开发和上线阶段均需使用的第三方包,应使用-S参数

4、devDependencies表示仅在开发阶段需要的第三方包,应使用-D参数

5、如何判断何时使用-S还是-D?

  • 第一步:

    1、-S参数

  • 进入这个网站后,例如需要下载webpack,即在这个网站里面直接搜索webpack

    1、-S参数

  • 点击你需要下载的webpack选项,这里我点击第一个,进入后往下滚动,找到如下图,就知道官网规定的,是-S还是-D

    1、-S参数

补充:npm -s和-d区别

npm install module_name -S = > npm install module_name --save

写入到dependencies对象

npm install module_name -D => npm install module_name --save-dev

写入到devDependencies对象

那么package.json文件中的devDependencies和dependencies对象有何区别?

devDependencies中的插件仅用于开发环境,不应用于生产环境;而dependencies中的依赖是需要发布到生产环境的。

总结

到此这篇关于npm后面的-S和-D参数举例详解的文章就介绍到这了,更多相关npm -S和-D参数详解内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章