如何使用 npm 安装 sqlite3 和 canvas 这些包

我目前的开发环境

在安装这些包的时候,用的是 win11 系统,Node 版本是 14.20.0

为什么安装 sqlite3, canvas 的时候经常出错

当我们使用 npm i xxx 命令来安装 Vue, React, lodash 这些普通 npm 包的时候,一般都会成功安装。因为这些包都是使用 JavaScript 来写的,安装的时候直接从 npm 源站点进行下载文件即可,无需在本地进行编译。

但当我们安装 sqlite3, canvas 这些原生 Node.js 包的时候,大多会遇到各种报错,比如:

  1. 缺少 Python, C++ 等环境
  2. 缺少 Visual Studio Build Tools
  3. Permission denied,缺少管理员权限

之所以会出现这些报错,是因为作者开发这些原生 Node.js 包的时候,不仅使用了 JavaScript 代码,还用到了 C++ 代码。我们在安装的时候,需要把这些 JavaScript 和 C++ 源代码下载到本地,然后调用本地的环境进行编译,得到能够使用的依赖包。

但是作为一名 JavaScript 开发者,我们本地一般都会缺少编译所需的环境,所以在编译的时候,大多数都会失败。

如何正确安装 sqlite3, canvas 这些原生包

sqlites3, canvas 这些包的作者在发布这些包的时候,不仅发布了源代码,还发布了不同环境下编译好的二进制文件,如果我们本地无法进行编译,可以直接下载作者编译好的这些二进制文件。

但是在国内不太方便访问 GitHub 网站,从这些站点下载二进制文件的时候大多会出错,我们可以从国内镜像网站进行下载,你可以点进链接查看有没有你需要下载的包。

然后关键点来了,我们在安装包的时候,需要添加一些配置,来指定从国内镜像网站进行下载二进制文件。安装 sqlite3 的时候,使用这样的命令:

bash 复制代码
# 安装最新版本的 sqlite3
npm i sqlite3 --node_sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3

# 安装指定版本的 sqlite3,需要注意:
# 安装 5.0.2 及更早的版本,使用下面的源
npm i sqlite3@5.0.2 --node_sqlite3_binary_host_mirror=https://npmmirror.com/mirrors

# 安装 5.0.3 及更新的版本,使用下面的源
npm i sqlite3@5.0.3 --node_sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3

如果要安装 canvas 也是类似的命令,但是要把 node_sqlite3_binary_host_mirror 换成 canvas_binary_host_mirror

bash 复制代码
npm i canvas --canvas_binary_host_mirror=https://npmmirror.com/mirrors/canvas

写在后面

如上图所示,我在安装这些包的时候,用的是 win11 系统,Node 版本是 14.20.0。如果你用的是其他系统或者其他版本的 Node,使用上面的命令也可以安装成功。

但是如果遇到了问题,可以参考我上面分享的思路:直接下载作者编译好的二进制文件,跳过本地编译的步骤。

相关推荐
烬头88211 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1361 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
2601_949833391 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
军军君012 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9223 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
qq_177767374 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462104 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n4 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon4 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233225 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos