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

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

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

最后

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

参考文献

相关推荐
秦jh_7 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21320 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy21 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与2 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss