乐趣区

什么是npm系列一npm简介

jiezi

本文同步发表博客: 什么是 npm 系列：一、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 中

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

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 package-lock.json

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

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/package.json').version
} catch (er) {foo = null}
if (notGoodFooVersion(fooVersion) ) {foo = null}

// .. then later in your program ..

if (foo) {foo.doFooThings()
}

3.4 bundleDependencies

假设我们有一个package.json：

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

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

在项目中执行npm install awesome-web-framework-1.0.0.tgz，结构也会变为：

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

4. 预告

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

退出移动版