使用 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"
  }
}

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

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

最后

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

参考文献

相关推荐
ekskef_sef10 分钟前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine64135 分钟前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr1 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js