使用 Rollup 的过程中遇到了与环境依赖包相关的问题

遇到的问题

Docker 环境下,当前 Node 16,异常如下:

分析问题

查看 pnpm-lock.yaml 文件,果然发现有 @rollup/rollup-linux-x64-gnu这个包,但是我并没有单独安装过 rollup包,我初步猜测是 vite 里依赖的,其结果验证我的猜测。

运行pnpm ls --depth=3包的依赖情况:

Rollup 从版本 2.60.0 开始引入了对特定环境依赖包(native modules)的支持,这是通过预构建的二进制文件来实现的。这些环境依赖包是为了提高 Rollup 在不同平台上的性能和兼容性,特别是在进行代码压缩(使用terser插件)和其他需要本地二进制支持的任务时。

这个变化主要反映在@rollup/plugin-commonjs和其他相关插件上,它们可能依赖于特定的二进制文件来加速处理过程。这意味着,在这个版本之后,Rollup 和其插件可能会根据操作系统(如 Windows、Linux、macOS)和架构(如 x64、arm)下载和使用特定的二进制文件。

当前项目vite 版本为 5.1.6,其依赖的 rollup 4.13.0,从@rollup/rollup-linux-x64-gnu包的版本记录来看,rollup 4.0.0才开始有这个包。顺便查看了其他包基本判断是,从 rollup 4.0.0版本开始自动加入这些环境依赖包。

那么我们找到了问题,如何解决呢?

首先想到是是 vite 降级 ,同时会降低 rollup 版本,只要rollup低于 4.0.0版本应该就没这个问题了。 但是,想用最新的vite就得另其他方案了,下面解决方案就是一种方式来解决这个问题。

解决方案

使用 "rollup": "npm:@rollup/wasm-node" 在你的 package.json 文件中实际上是指定了一个别名和重定向。这种方式是在 npm 包管理器中使用,它允许你将一个依赖项指向另一个包。这意味着当你安装或引用 rollup 时,实际上使用的是 @rollup/wasm-node 包。

这样做的目的通常是为了使用一个特定的、可能被修改过或者有特殊用途的包版本,而不是官方的或者广泛使用的版本。在这个特定的例子中,@rollup/wasm-node 很可能是一个针对 WebAssembly (WASM) 在 Node.js 环境中使用的 Rollup 版本或插件。这表示该包可能包含了一些特定于 WASM 的优化或特性,这些可能在标准的 Rollup 包中不可用。

应用场景

在 WebAssembly 项目中,尤其是那些需要编译到 WASM 并在 Node.js 环境中运行的项目,使用 @rollup/wasm-node 可能提供了一些特别的优势或功能。这包括可能的性能优化、更好的模块兼容性、或者是专门为 WASM 设计的打包策略。

注意事项

  • 使用这种方法时,应确保你了解 @rollup/wasm-node 包的来源和维护状态。非官方包可能不会像官方包那样频繁地更新或维护。
  • 确认该包与你项目中使用的其他 Rollup 插件和配置兼容。
  • 考虑到 WebAssembly 的特性和用例,确保你的项目确实从中受益,这样的重定向才是有价值的。

实现方式

要在 package.json 中实现这种重定向,你应该这样指定依赖项:

json 复制代码
{
  "dependencies": {
    "rollup": "npm:@rollup/wasm-node@^版本号"
  }
}

替换 版本号 为你希望使用的特定版本号。这样设置后,当你运行安装命令(如 npm install)时,npm 将会下载并安装 @rollup/wasm-node 而不是标准的 rollup 包。

  • 如果你是采用 pnpm 可以这么设置:
perl 复制代码
  "pnpm": {
    "overrides": {
      "rollup": "npm:@rollup/wasm-node"
    }
  }

如果你是采用 npm 可以怎么设置

perl 复制代码
"overrides": {
  "vite": {
    "rollup": "npm:@rollup/wasm-node"
  }
}

改完重新安装,再次查看依赖,如图:

再次发布到云服务上运行,已经完全没问题了。

最后

如果这篇文章对您有所帮助,请帮忙点个赞👍,您的鼓励是我创作路上的最大的动力。

参考文献

相关推荐
疯子****6 小时前
【无标题】
前端·clawdbot
RichardLau_Cx6 小时前
【保姆级实操】MediaPipe SDK/API 前端项目接入指南(Web版,可直接复制代码)
前端·vue·react·webassembly·mediapipe·手部追踪·前端计算机视觉
不爱写程序的东方不败6 小时前
APP接口测试流程实战Posman+Fiddler
前端·测试工具·fiddler
晚霞的不甘7 小时前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
黎子越7 小时前
python相关练习
java·前端·python
北极糊的狐8 小时前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
XRJ040618xrj8 小时前
Nginx下构建PC站点
服务器·前端·nginx
We་ct8 小时前
LeetCode 289. 生命游戏:题解+优化,从基础到原地最优
前端·算法·leetcode·矩阵·typescript
有诺千金9 小时前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_944711439 小时前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js