Windows运行Wasmer JS示例无法解析@wasmer/wasi绑定模块如何解决？

问题表现 #

在Windows系统运行JavaScript编写的Wasmer hello-world程序（Wasmer是一款服务端执行WebAssembly的开源运行时）时，Parcel构建阶段直接失败，服务无法正常提供访问。
完整报错输出：

Server running at http://localhost:1234
× Build failed.

@parcel/core: Failed to resolve '@wasmer/wasi/lib/bindings/browser' from './index.js'

  C:\Users\msi\docs.wasmer.io\integrations\js\wasi\browser\examples\hello-world\index.js:2:29
    1 | import { WASI } from '@wasmer/wasi/lib'
  > 2 | import browserBindings from '@wasmer/wasi/lib/bindings/browser'
  >   |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 | import { WasmFs } from '@wasmer/wasmfs'
    4 |

报错核心是@parcel/core无法从入口文件index.js解析到@wasmer/wasi/lib/bindings/browser依赖，问题定位在index.js第2行的导入语句，直接中断构建流程。

故障原因 #

• Windows环境下Parcel处理无后缀模块导入的逻辑和类Unix系统存在差异，不会自动补全.js后缀
• 部分发布版本的@wasmer/wasinpm包未做好导出路径适配，示例里硬编码的无后缀导入路径匹配不到包内实际文件
• 安装依赖时未锁定版本，拉取的高版本@wasmer相关包目录结构和示例编写时的结构不一致，路径直接失效

修复操作 #

• 首先修改index.js第2行的导入语句，补全.js后缀：

import browserBindings from '@wasmer/wasi/lib/bindings/browser.js'

保存后重新执行构建命令，验证是否恢复正常。

• 如果补全后缀仍报找不到文件，直接打开项目下node_modules/@wasmer/wasi/lib/bindings/目录，查看目录内实际存在的浏览器端绑定文件名，把导入路径替换成实际存在的文件名即可。不少版本的包把这个文件命名为browser.bundled.js，对应把导入路径改成@wasmer/wasi/lib/bindings/browser.bundled.js就能解决。
• 上述操作都无效的话，就是安装的@wasmer包版本和示例代码不匹配，执行以下命令安装兼容的固定版本：

npm uninstall @wasmer/wasi @wasmer/wasmfs
npm install @wasmer/wasi@0.12.0 @wasmer/wasmfs@0.12.0

装完后清空Parcel缓存，重新启动构建服务即可正常运行。

内容的提问来源于stack exchange，提问作者Ajit