如何添加npm参数

npm是Node.js的包管理工具，它的诞生也极大的促进了前端的发展，在现代前端开发中都离不开npm的身影。

本文是npm系列的第一篇，知识很基础，作为一个热身文章，如果各位已经是开发熟练工了，完全可以跳过这篇。

1. 安装 npm

npm 是基于 Node.js，所以我们需要安装 Node.js，方式有两种：

1. Node.js 网站
2. nvm (建议) 具体文章可以搜索下

2. 使用

2.1 如何更新npm

// 查看npm版本 npm -v // 更新npm自身 npm install npm@latest -g

2.2 安装依赖

在实际使用中我们既安装本地包（项目依赖），也会安装全局包（命令行工具）。

1. 如何管理本地包

可以使用下面的命令来安装一个包：

npm install <package_name>

移除包可以用指令：

npm uninstall <package_name>

在项目中安装包时默认会安装到dependencies中，我们可以通过以下参数来控制这个行为：

• -P, --save-prod: 记录在dependencies
• -D, --save-dev: 记录在devDependencies
• -O, --save-optional: 记录在optionalDependencies
• --no-save: 不会记录在dependencies

除此之外还有两个额外的参数：

• -E, --save-exact: 版本号不会按照语义化记录，会显示具体的”1.2.3”
• -B, --save-bundle: 依赖也会记录在bundleDependencies中

如需从 文件中删除依赖，需要在命令后添加参数:

npm uninstall --save lodash // 通过--save-dev安装的包，移除的时候也需指定为--save-dev将其卸载 npm uninstall --save-dev webpack

1. 如何安装全局包

全局安装一般是用来安装命令行工具，诸如gulp、http-server，我们只需要在后面加上-g，比如：

npm install -g http-server

有时候我们记不清某个包，想查看所有已安装的包应该用什么命令呢：

// depth代表遍历的深度，如果没有该参数，会把所有包的依赖也显示 npm list -g --depth 0

2.3

项目中安装依赖后在自动生成文件，里面包含安装的依赖信息，主要是用来锁定依赖版本，确保团队之间安装依赖时不会出现差异。

3. dependencies

前面提到dependencies的概念，那在npm中都有哪些依赖呢？

• dependencies 生产环境
• devDependencies 开发环境
• optionalDependencies 可选依赖
• peerDependencies 前置依赖
• bundleDependencies 待打包依赖（没找到具体名称，可以看下后面的具体介绍）

3.1 dependencies && devDependencies

这两个是我们使用的最多的，也是最需要注意的。

假设我们有一个插件magic-lint，它的作用是在提交commit时检查以及格式化代码，那么里面至少有prettier插件用来美化代码，我们需要确保其他用户安装magic-lint之后能正常使用，那就要把prettier列为dependencies。

另外我们在开发magic-lint过程是属于开发环境，我们会需要jest来测试，普通用户安装时是不需要jest，我们把jest列为devDependencies后就可以避免这样的情况。

如果添加--production标记，或者环境变量NODE_ENV被设置为production, npm就不会安装devDependencies中的模块。

3.2 peerDependencies

那什么时候用peerDependencies呢？

假设我们有一个webpack-plugin-god插件，它只是webpack的插件，并不依赖webpack，所以在dependencies或devDependencies中不会写明webpack，但事实上它又是针对特定的webpack版本开发，这个时候我们就可以把webpack写入peerDependencies中。

3.3 optionalDependencies

如果有一个包属于可与有无的，我们就可以把它归为optionalDependencies

写代码时我们可以这样使用可选包：

try { var foo = require('foo') var fooVersion = require('foo/').version } catch (er) { foo = null } if ( notGoodFooVersion(fooVersion) ) { foo = null } // .. then later in your program .. if (foo) { () }

3.4 bundleDependencies

假设我们有一个：

{ "name": "awesome-web-framework", "version": "1.0.0", "bundledDependencies": [ "renderized", "super-streams" ] }

通过npm pack命令我们可以得到文件awe，里面会包含renderized和super-streams两个依赖。

在项目中执行npm install awe，结构也会变为：

├── node_modules ├── awesome-web-framework │ └── renderized │ └── super-streams └── xxx

4. 预告

下一篇将讲解 npm install，看了之后，希望能够让你惊叹一下：“哇~ 原来还可以这样”，我就心满意足了。

系列汇总

• 什么是npm系列：一、npm简介
• 什么是npm系列：二、install 的十八般武艺
• to be continued