前端踩坑系列《六》——让人又爱又恨的npm包
前言
作为一个前端,我们经常在执行一个命令的时候报错,那就是 npm install
,那么 npm install
的时候,程序到底做了什么,还有遇到一些类似的问题的时候怎么去定位问题?
以下是我对 npm
包的一些理解,还有自己踩的一些坑,不得不说, npm
的坑实际上跟下面这张图体现出来的一样,深不见底,只能列举一二。
关于 npm install
首先 npm
是 Node
的模块管理器, npm
完成了 Node
第三方模块的发布、安装等等.
npm install
会将 npm
包安装到 node_modules
目录下
此处参考阮一峰的博客:http://www.ruanyifeng.com/blog/2016/01/npm-install.html
具体执行过程是这样的:
1.发出 npm install
指令
2. npm
向 registry
查询压缩包的地址
3.下载压缩包后,存放到 ~/.npm
目录
4.解压压缩包到当前项目中的 node_module
目录
其中具体要安装哪些包,可以在 install
后面指定,默认的话,就会去 package.json
文件中查找。这里我们需要注意的是 dependencies
和 devDependencies
的区别
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
中没有找到这个依赖。但是自己忽略了一种情况,就是有可能是依赖的依赖。
那为什么安装不成功呢? 跟之前的“比特币事件”相关,这都能掉进坑里
起因:比特币事件:http://caibaojian.com/event-stream.html
解决方法:
目前 npm
已经删除了带有恶意版本的 event-stream
,如果你想继续使用 event-stream
,可更新到最新版本的 event-stream 4.0.1
。
那我们可以先安装这个版本的 event-stream
npm i event-stream@4.0.1
然后重新 npm i
,就可以解决了
结束语
npm
包会遇到各种各样神奇的问题,最后两个坑就是明显的例子,我觉得我们能做的,就是搞清楚它的原理,在遇到类似问题的时候能够进一步的定位问题。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php设计模式之抽象工厂模式分析【星际争霸游戏案例】
- PHP使用PDO、mysqli扩展实现与数据库交互操作详解
- Linux中的who命令实例介绍
- php获取本年、本月、本周时间戳和日期格式的实例代码
- Smarty缓存机制实例详解【三种缓存方式】
- 详解在Ubuntu上的Apache配置SSL(https证书)的正确姿势
- php设计模式之建造器模式分析【星际争霸游戏案例】
- Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
- PHP容器类的两种实现方式示例
- Linux下Mysql定时任务备份数据的实现办法
- PHP抽象类和接口用法实例详解
- php+lottery.js实现九宫格抽奖功能
- PHP实现一个按钮点击上传多个图片操作示例
- php实现 master-worker 守护多进程模式的实例代码
- Ubuntu 18.04 Server 设置静态IP 的办法