前端踩坑系列《六》——让人又爱又恨的npm包

1,515 阅读4分钟

前言

作为一个前端,我们经常在执行一个命令的时候报错,那就是 npm install,那么 npm install 的时候,程序到底做了什么,还有遇到一些类似的问题的时候怎么去定位问题?

以下是我对 npm 包的一些理解,还有自己踩的一些坑,不得不说,npm 的坑实际上跟下面这张图体现出来的一样,深不见底,只能列举一二。

关于 npm install

首先 npmNode 的模块管理器,npm 完成了 Node 第三方模块的发布、安装等等.

npm install 会将 npm 包安装到 node_modules 目录下

此处参考阮一峰的博客,具体执行过程是这样的:

1.发出 npm install 指令 2.npmregistry 查询压缩包的地址 3.下载压缩包后,存放到 ~/.npm 目录 4.解压压缩包到当前项目中的 node_module 目录

其中具体要安装哪些包,可以在 install 后面指定,默认的话,就会去 package.json 文件中查找。这里我们需要注意的是 dependenciesdevDependencies 的区别

dependencies(项目依赖库)也就是最后打包的时候也需要打包进去项目中,我们在安装的时候可以使用--save 写入到 dependencies.这里的插件是需要发布到生产环境,自始至终都会存在

devDependencies(开发依赖库)我们安装的时候可以加上 --save-dev.这里的插件只用于开发环境,而不用于生产环境。打包的时候需要,打包完成就不再需要。

npm 换源

由于 npm 包如果直接安装的话,是从国外的服务器下载的,速度会比较慢,而且容易出现异常,那么我们可以换成国内的源,比如淘宝的 cnpm,下面的一些命令可能帮得上你

npm install --registry=https://registry.npm.taobao.org // 临时使用淘宝镜像install
npm --registry https://registry.npm.taobao.org install express // 使用临时淘宝镜像install某个模块
npm install -g cnpm --registry=https://registry.npm.taobao.org  // 全局安装淘宝镜像,之后可以直接使用cnpm install

npm config set registry https://registry.npm.taobao.org // 永久设置npm为淘宝镜像
npm config set registry https://registry.npmjs.org/ // 使用官方的镜像
npm config get registry // 查看npm源地址

这里推荐一个换源的工具, nrm,自行百度,不再细说.

npm 包版本问题

package.json 文件中,我们会看到每个依赖都有指定的版本

首先我们来认识一下,这些版本的命名规则,我们都会命名成 x.y.z 格式,其中

  • x 是主版本。大改动。
  • y 是次版本号。增加新特性
  • z 是补丁号。修复问题

然后注意一点就是上面截图中的 ^ 符号,它代表的是在依赖版本兼容下,最新的次版本。有时候我们遇到一些问题,需要改成 ~,代表的是在依赖版本兼容下,最新的补丁版。

关于 package.lock.json

问题描述 这个是团队同事遇到的一个问题,在这里也记录一下。 npm i 的时候会报下面的问题:

删除 package-lock.json 就不会有这个问题。

问题解决 首先,我们需要清楚 package-lock.json 的作用,很简单就是要锁定安装依赖的时候的版本号,在团队协作的时候有必要的话上传到 git 上,防止因为依赖版本问题导致出现 bug

重新看回报错信息,就会发现,它的提示意思就是原本期待是什么版本,但是现在你是什么版本

比特币事件

问题描述: 项目在重新装依赖的时候,发现报以上的问题。

问题分析: 一开始认为是这个包不存在,但是奇怪的是在 package.json 中没有找到这个依赖。但是自己忽略了一种情况,就是有可能是依赖的依赖。

那为什么安装不成功呢? 跟之前的“比特币事件”相关,这都能掉进坑里

起因:比特币事件

解决方法: 目前 npm 已经删除了带有恶意版本的 event-stream,如果你想继续使用 event-stream,可更新到最新版本的 event-stream 4.0.1

那我们可以先安装这个版本的 event-stream

npm i event-stream@4.0.1

然后重新 npm i,就可以解决了

结束语

npm 包会遇到各种各样神奇的问题,最后两个坑就是明显的例子,我觉得我们能做的,就是搞清楚它的原理,在遇到类似问题的时候能够进一步的定位问题。

小广告专用区

本公众号会在后台收集大家平时遇到的问题以及解决方法,欢迎大家投稿!当然问题以及解决方法都是有一定的格式的,具体的要求如下:

  • 使用 markdown 书写(必须),特别是英文,还有代码块
  • 每个问题都应该包括“问题描述”和“问题解决”两个部分(必须)
  • 其他的格式参考 掘金翻译计划(非必须)

欢迎大家关注本公众号

image