解决 npm install canvas@2.11.2 失败的问题

文章目录

  • 前言
  • [Mac 版](#Mac 版)
    • 安装系统依赖(macOS)
    • [确保 Xcode 命令行工具已安装](#确保 Xcode 命令行工具已安装)
    • [将 npm 镜像源更改为淘宝镜像源](#将 npm 镜像源更改为淘宝镜像源)
    • [全局安装 node-gyp](#全局安装 node-gyp)
    • [清除 npm 缓存并开始安装](#清除 npm 缓存并开始安装)
    • 安装成功
  • [Windows 版](#Windows 版)
    • [安装 vscode](#安装 vscode)
    • [将 npm 镜像源更改为淘宝镜像源](#将 npm 镜像源更改为淘宝镜像源)
    • [全局安装 node-gyp](#全局安装 node-gyp)
    • [清除 npm 缓存并开始安装](#清除 npm 缓存并开始安装)
    • 安装成功

前言

项目中使用了 canvas npm包来实现 node 服务端数据成图的功能。但是在项目中使用 npm install 安装失败,经过各种和 AI 沟通的尝试后,终于指定版本的 canvas 安装成功,项目也运行成功,在此记录一下安装方法。


Mac 版

  • 操作系统:MacOS Sequoia 15.5
  • node版本:v15.14.0
  • npm版本:v7.7.6

安装系统依赖(macOS)

canvas 需要系统级图形库支持,使用Homebrew安装:

bash 复制代码
brew install pkg-config cairo pango libpng jpeg giflib librsvg

确保 Xcode 命令行工具已安装

bash 复制代码
xcode-select --install

将 npm 镜像源更改为淘宝镜像源

bash 复制代码
# 查看当前配置
npm config get registry
# 设置为淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 恢复为官方镜像
npm config set registry https://registry.npmjs.org/

全局安装 node-gyp

node-gyp是一个Node.js的原生插件构建工具,用于编译C++扩展模块。很多Node.js模块,比如canvas,都包含C++代码,需要编译后才能在特定平台上运行。

bash 复制代码
npm install -g node-gyp

清除 npm 缓存并开始安装

bash 复制代码
# 清除npm缓存
npm cache clean --force
npm cache verify
# 删除指定文件
rm -rf node_modules package-lock.json
npm install

安装成功

执行 npm install 后,需要等待10分钟左右才会安装成功,进程会卡在 core-js@2.6.12 处,如下图:

等待中截图

安装成功截图


Windows 版

  • 操作系统:Windows 11
  • node版本:v15.14.0
  • npm版本:v7.7.6

安装 vscode

官网下载地址

将 npm 镜像源更改为淘宝镜像源

bash 复制代码
# 查看当前配置
npm config get registry
# 设置为淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 恢复为官方镜像
npm config set registry https://registry.npmjs.org/

全局安装 node-gyp

node-gyp是一个Node.js的原生插件构建工具,用于编译C++扩展模块。很多Node.js模块,比如canvas,都包含C++代码,需要编译后才能在特定平台上运行。

bash 复制代码
npm install -g node-gyp

清除 npm 缓存并开始安装

bash 复制代码
# 清除npm缓存
npm cache clean --force
npm cache verify
# 删除指定文件
rmdir /s /q node_modules && del /f /q package-lock.json
npm install

安装成功

执行 npm install 后,很快就安装成功了,不会像 Mac 端卡着。如下图:

相关推荐
cxr8283 天前
Vercel AI SDK 3.0 学习入门指南
前端·人工智能·学习·react.js·typescript·npm·reactjs
じòぴé南冸じょうげん3 天前
报错error:0308010C:digital envelope routines::unsupported解决方案
前端·javascript·vue.js·npm·node.js
Hilaku3 天前
我为什么在团队里,强制要求大家用pnpm而不是npm?
前端·javascript·npm
安心不心安3 天前
npm全局安装后,依然不是内部或外部命令,也不是可运行的程序或批处理文件
前端·npm·node.js
前端 贾公子4 天前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
前端·vue.js·npm
Fireworkitte4 天前
nodejs的npm
前端·npm·node.js
灰海4 天前
vscode,cursor,Trae终端不能使用cnpm、npm、pnpm命令解决方案
前端·ide·vue.js·vscode·npm·编辑器
斯~内克4 天前
前端包管理工具深度对比:npm、yarn、pnpm 全方位解析
前端·npm·node.js
-睡到自然醒~4 天前
完整的 Meteor NPM 集成
前端·npm·node.js