使用 NPM 可能存在的困扰

Posted 2021-06-27 小姚同学要继续加油呀

NPM INSTALL 安装依赖慢

有些依赖包源属于国外，在国内下载第三方包的速度极慢。

解决方案：

1. 使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

使用方法：

$ cnpm install [name]

2. npm源管理工具

$ npm  install   -g   nrm

使用方法：

$ nrm ls

* npm ---- 945ms
  yarn --- 948ms
  cnpm --- 1046ms
  taobao - 413ms
  nj ----- Fetch Error
  npmMirror  1794ms
  edunpm - Fetch Error

// 切换
 $ nrm use taobao
                         verb config Skipping project config: C:\\Users\\user/.npmrc. (matches userconfig)
 
   Registry has been set to: https://registry.npm.taobao.org
   
 // 增加源
 $ nrm add <registry> <url> [home]

 // 删除源
 $ nrm del <registry>
  
 // 测试速度
 $ nrm test
 
* npm ---- 945ms
  yarn --- 948ms
  cnpm --- 1046ms
  taobao - 413ms
  nj ----- Fetch Error
  npmMirror  1794ms
  edunpm - Fetch Error

一般情况，不使用VPN，淘宝源速度最快，但是可能会出现依赖安装不正确的情况。
若需要使用公司私库，自然需要指定registry。

NPM 更新版本不稳定

同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。

"5.0.3",
"~5.0.3",
"^5.0.3"

• “5.0.3”表示安装指定的5.0.3版本
• “～5.0.3”表示安装5.0.X中最新的版本
• “^5.0.3”表示安装5.X.X中最新的版本。

所以常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。

同时，大多数npm库都严重依赖于其他npm库，这会导致嵌套依赖关系，并增加无法匹配相应版本的几率。

虽然可以通过npm config set save-exact true命令关闭在版本号前面使用 ^ 的默认行为，但这个只会影响顶级依赖关系。由于每个依赖的库都有自己的package.json文件，而在它们自己的依赖关系前面可能会有^符号，所以无法通过package.json文件为嵌套依赖的内容提供保证。

为了解决这个问题，npm提供了shrinkwrap命令。此命令将生成一个npm-shrinkwrap.json文件，为所有库和所有嵌套依赖的库记录确切的版本。

然而，即使存在npm-shrinkwrap.json这个文件，npm也只会锁定库的版本，而不是库的内容。即便npm现在也能阻止用户多次重复发布库的同一版本，但是npm管理员仍然具有强制更新某些库的权力。

所以实际开发中，第三方依赖包版本根据需求写死或限制版本范围更新，预防换包导致的兼容性bug。测试开发时 ，如何确保更新的包是最新版本？

这里得先介绍一下 package-lock.json

package-lock.json诞生的目的是为了防止出现我们上述的情况。 同一个package.json却产生了不同的运行结果。 package-lock.json在npm 5时添加进来, 所以如果你使用5以上的版本, 你就会看到这个文件, 除非你手动禁用掉它。

所以从此以后npm会根据package-lock.json里的内容来处理和安装依赖而不是根据package.json。因为pacakge-lock.json给每个依赖标明了版本, 获取地址和哈希值, 使得每次安装都会出现相同的结果。不管你在什么机器上面或什么时候安装。

官方定义

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates. This file is intended to be committed into source repositories, and serves various purposes.

大概意思是, 当我们对node_modules或者package.json进行了更改后, package-lock.json文件会自动生成.
里面会描述上一次更改后的确切的依赖管理树. 里面包含了唯一的版本号和相关的包信息. 之后的npm
install会根据package-lock.json文件进行安装, 保证不同环境, 不同时间下的依赖是一样的.

还有一个好处是, 由于package-lock.json文件中记录了下载源地址, 可以加快我们的npm install速度

因此，解决方案：

// 最简单直接方案，删除重装
 $ rm -rf node_modules

 $ rm package-lock.json

 $ npm i

// npm-check检查更新

 $ npm install -g npm-check

 $ npm-check

 $ npm-check -u
    
? Choose which packages to update. (Press <space> to select)
    
 Update package.json to match version installed.
 ❯◯ chalk     ^1.1.3   ❯  2.4.2   https://github.com/chalk/chalk#readme
  ◯ cheerio   ^0.22.0  ❯  0.22.0  https://github.com/cheeriojs/cheerio#readme
  ◯ debug     ^2.3.3   ❯  4.1.1   https://github.com/visionmedia/debug#readme
  ◯ log4js    ^1.0.1   ❯  4.1.0   https://log4js-node.github.io/log4js-node/
  ◯ mustache  ^2.3.0   ❯  3.0.1   https://github.com/janl/mustache.js
  ◯ request   2.79.0   ❯  2.88.0  https://github.com/request/request#readme
  ◯ unescape  ^0.2.0   ❯  1.0.1   https://github.com/jonschlinkert/unescape
  ◯ yargs     ^6.4.0   ❯  13.2.2  https://yargs.js.org/
    
       Space to select. Enter to start upgrading. Control-C to cancel.
 
// npm-upgrade更新
 $ npm install -g npm-upgrade

 $ npm-upgrade

// 更新全局包：
 $ npm update <name> -g

// 更新生产环境依赖包：
 $ npm update <name> --save

// 更新开发环境依赖包：
 $ npm update <name> --save-dev

// 升级package-lock.json里面的库包
 $ npm install XXX@x.x.x