Node包管理工具详解

4/15/2021 NodeNPMYarn

# 一、初始化一个 package.json

npm init 手动配置
1
npm init -y 使用默认配置
1

# 1.1 各参数说明

  • name 是项目的名称 (必须)
  • version 是当前项目的版本号 (必须)
  • description 是描述信息,很多时候是作为项目的基本描述 (发布到 npm 上的简介)
  • author 是作者相关信息(发布时用到)
  • license 是开源协议(发布时用到)

private 属性:
private 属性记录当前的项目是否是私有的;
当值为 true 时,npm 是不能发布它的,这是防止私有项目或模块发布出去的方式;

main 入口文件,前端项目中如果使用 webpack 配置了入口文件则该配置失效。
main 主要作用是,当我们把包发布到 npm 上去的时候,别人下载后,引入的是哪个文件就是在这里指定的。
例如:包名称是 utils-format
main 配置是: “main”: “main.js”
则 const format = require(‘utils-format’) 引入的实际是 main.js

{
  "name": "npmdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private":true, //是否是私有的
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12

# 1.2 dependencies devDependencies 属性

dependencies
属性是指定无论开发环境还是生成环境都需要依赖的包;
通常是我们项目实际开发用到的一些库模块;

devDependencies
一些包在生成环境是不需要的,比如 webpack、babel 等;
这个时候我们会通过 npm install xxx --save-dev,将它安装到 devDependencies 属性中;

但是对于 前端 项目来说,意义并不大,因为 webpack 在打包的时候,从入口文件开始查找并生成依赖树,如果文件存在于依赖树中,那么它还是会被打包的。

真正的意义:
在我们开发服务器的时候,或者开发一个共享出去的包工具的时候(发布到 npm 上),别人在安装你这个工具的时候,它则是根据这两个属性来的。

疑问:那么在生成环境如何保证不安装这些包呢?

生成环境不需要安装时,我们需要通过
npm install --production 来安装文件的依赖;

# 1.3 版本管理问题

我们在写 Vue 项目的时候,经常能够看到某些依赖的版本号前面有一个 ~ 或者 ^,那么这两个符号到底是什么意思呢?

npm 的包通常需要遵从 semver 版本规范:

semver 规范:semver (opens new window)
npm semver:npm sermver 规范 (opens new window)

semver 版本规范是 X.Y.Z:

  • X 主版本号(major):当你做了不兼容的 API 修改(可能不兼容之前的版本);
  • Y 次版本号(minor):当你做了向下兼容的功能性新增(新功能增加,但是兼容之前的版本);
  • Z 修订号(patch):当你做了向下兼容的问题修正(没有新功能,修复了之前版本的 bug);

我们这里解释一下 ^和~的区别:

  • ^x.y.z:表示 x 是保持不变的,y 和 z 永远安装最新的版本;
  • ~x.y.z:表示 x 和 y 保持不变的,z 永远安装最新的版本;

# 1.4 engines 属性

engines 中译为 引擎

engines 属性用于指定 Node 和 NPM 的版本号;
在安装的过程中,会先检查对应的引擎版本,如果不符合就会报错;
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ],只是很少用到;

例:

 "engines": {
   "node": ">= 4.0.0",
   "npm": ">= 3.0.0"
 }
1
2
3
4

# 1.5 browserlist 属性

  • 用于配置打包后的 JavaScript 浏览器的兼容情况,参考;
  • 否则我们需要手动的添加 polyfills(补丁)来让支持某些语法;
  • 也就是说它是为 webpack 等打包工具服务的一个属性

例:

"browserslist": [
	"> 1%",
	"last 2 versions",
	"not ie <= 8"
]
1
2
3
4
5

# 二、npm install 命令

安装 npm 包分两种情况:

  • 全局安装(global install): npm install yarn -g;
  • 项目(局部)安装: npm install

全局安装

  • 全局安装是直接将某个包安装到全局:
  • 比如 yarn 的全局安装:
    • npm install yarn -g

但是很多人对全局安装有一些 误会 :

  • 通常使用 npm 全局安装的包都是一些工具包:yarn、webpack 等;
  • 并不是类似于 axios、express、koa 等库文件;
  • 所以全局安装了之后并不能让我们在所有的项目中使用 axios 等库

那全局安装有什么用呢?
全局安装一般不会安装普通的包,如axios、express等,一般安装的都是工具包,比如yarn、webpack、gulp之类的,安装之后会生成对应的可执行文件的(.exe),并且会自动配置环境变量的。

这里推荐一手yarn,具体差别看: yarn 和 npm 的区别 (opens new window)
npm 或 yarn 切换为国内镜像可查看我的这边文章:Yarn 和 NPM 国内镜像(淘宝镜像) (opens new window)

# 2.1 安装开发和生产依赖

npm install axios
npm i axios
1
2

# 2.2 开发依赖

npm install webpack --save-dev
npm install webpack -D
npm i webpack –D
1
2
3

# 2.3 根据 package.json 中的依赖包

npm install
1

# 三、npm install 原理解析

很多朋友之前应该已经会了 npm install <package>,但是你是否思考过它的内部原理呢?

  • 执行 npm install 它背后帮助我们完成了什么操作?
  • 我们会发现还有一个成为 package-lock.json 的文件,它的作用是什么?
  • 从 npm5 开始,npm 支持缓存策略(来自 yarn 的压力),缓存有什么作用呢?

这是 coderwhy 大神总结出来的一幅原理图:在这里插入图片描述

# 四、package-lock.json

package-lock.json 文件解析:

  • name:项目的名称;
  • version:项目的版本;
  • lockfileVersion:lock 文件的版本;
  • requires:使用 requires 来管理子依赖;
  • dependencies:项目的依赖
    • 当前项目依赖 axios,但是 axios 依赖 follow-redireacts;所以安装axios的时候,会连带安装follow-redireacts
  • axios 中的属性如下:
    • version表示实际安装的 axios 的版本;
    • resolved用来记录下载的地址,registry 仓库中的位置;
    • requires记录当前模块的依赖;
    • integrity用来从缓存中获取索引,再通过索引去获取压缩包文件;

示例文件:
在这里插入图片描述

# 五、npm 其他常用命令

强制删除 node_modules 并重新安装:rm \-rf node_momdules && npm install(windows 不支持)

查看缓存路径:npm config get cache

卸载某个依赖包(效果都是一样的):

  • npm uninstall package
  • npm uninstall package --save-dev
  • npm uninstall package -D

强制重新 build

  • npm rebuild

清除缓存

  • npm cache clean

npm 的命令其实是非常多的:

  • https://docs.npmjs.com/cli-documentation/cli
  • 更多的命令,可以根据需要查阅官方文档

在这里插入图片描述

# 六、cnpm 工具

由于一些特殊的原因,某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。

查看 npm 镜像:npm config get registry

我们可以直接设置 npm 的镜像:npm config set registry https://registry.npm.taobao.org

但是对于大多数人来说(比如我),并不希望将 npm 镜像修改了:

  • 第一,不太希望随意修改 npm 原本从官方下来包的渠道;
  • 第二,担心某天淘宝的镜像挂了或者不维护了,又要改来改去;

这个时候,我们可以使用 cnpm,并且将 cnpm 设置为淘宝的镜像:
npm install \-g cnpm \--registry=https://registry.npm.taobao.org

# 七、npx 工具

npx 是 npm5.2 之后自带的一个命令。

npx 的作用非常多,但是比较常见的是使用它来调用项目中的某个模块的指令。

我们以 webpack 为例:

  • 全局安装的是 webpack5.1.3
  • 项目安装的是 webpack3.6.0
  • 如果我在终端执行 webpack --version 使用的是哪一个命令呢?
    • 显示结果会是 webpack 5.1.3,事实上使用的是全局的,为什么呢?
    • 原因非常简单,在当前目录下找不到 webpack 时(没有自动注册环境变量),就会去全局找,并且执行命令;

如何解决这个问题呢?

使用项目(局部)的 webpack,常见的是两种方式:

方式一:明确查找到 node_module 下面的 webpack
在终端中使用如下命令(在项目根目录下):./node_modules/.bin/webpack \--version

方式二:在 scripts 定义脚本,来执行 webpack;
修改 package.json 中的 scripts:npm run webpack

"scripts": {
	"webpack": "webpack --version"
}`
1
2
3

方式三:使用 npx
npx webpack \--version
npx 的原理非常简单,它会到当前目录的 node_modules/.bin 目录下查找对应的命令;

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar