跟随Rust+WebAssembly教程执行npm init wasm-app www时遇可执行文件错误

问题背景 #

跟随Rust + WebAssembly教程学习，完成第二章第二部分的文件查看与构建步骤后，执行命令npm init wasm-app www时反复出现错误：could not determine executable to run，此前构建无异常。使用环境为Node.js v22.4.1、npm v10.8.1，完整错误日志如下：

0 verbose cli C:\Users\Name\AppData\Local\fnm_multishells\28000_1721347052931\node.exe C:\Users\Name\AppData\Local\fnm_multishells\28000_1721347052931\node_modules\npm\bin\npm-cli.js
1 info using npm@10.8.1
2 info using node@v22.4.1
3 silly config load:file:C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\npmrc
4 silly config load:file:C:\Users\Name\RustroverProjects\wasm-game-of-life\.npmrc
5 silly config load:file:C:\Users\Name\.npmrc
6 silly config load:file:C:\Users\Name\AppData\Local\fnm_multishells\28000_1721347052931\etc\npmrc
7 verbose title npm init wasm-app www
8 verbose argv "init" "wasm-app" "www"
9 verbose logfile logs-max:10 dir:C:\Users\Name\AppData\Local\npm-cache\_logs\2024-07-18T23_58_08_742Z-
10 verbose logfile C:\Users\Name\AppData\Local\npm-cache\_logs\2024-07-18T23_58_08_742Z-debug-0.log
11 silly logfile start cleaning logs, removing 1 files
12 silly logfile done cleaning log files
13 silly packumentCache heap:4345298944 maxSize:1086324736 maxEntrySize:543162368
14 http fetch GET 200 https://registry.npmjs.org/create-wasm-app 361ms (cache revalidated)
15 verbose stack Error: could not determine executable to run
15 verbose stack     at getBinFromManifest (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\node_modules\libnpmexec\lib\get-bin-from-manifest.js:17:23)
15 verbose stack     at exec (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\node_modules\libnpmexec\lib\index.js:198:15)
15 verbose stack     at async Init.execCreate (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\lib\commands\init.js:136:5)
15 verbose stack     at async Init.exec (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\lib\commands\init.js:44:14)
15 verbose stack     at async Npm.exec (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\lib\npm.js:207:9)
15 verbose stack     at async module.exports (C:\Users\Name\AppData\Roaming\fnm\node-versions\v22.4.1\installation\node_modules\npm\lib\cli\entry.js:74:5)
16 verbose pkgid create-wasm-app@0.1.0
17 error could not determine executable to run
18 verbose cwd C:\Users\Name\RustroverProjects\wasm-game-of-life
19 verbose os Windows_NT 10.0.22631
20 verbose node v22.4.1
21 verbose npm  v10.8.1
22 verbose exit 1
23 verbose code 1
24 error A complete log of this run can be found in: C:\Users\Name\AppData\Local\npm-cache\_logs\2024-07-18T23_58_08_742Z-debug-0.log

问题原因 #

报错核心是create-wasm-app@0.1.0版本过于老旧，其package.json未配置符合npm v10+要求的bin字段，导致npm无法识别可执行文件路径。

解决方案 #

方案1：用npx执行最新版create-wasm-app #

替换原命令为：

npx create-wasm-app@latest www

该命令直接拉取并运行最新版工具，规避旧版本兼容性问题。

方案2：降级npm至v9版本 #

npm v10+对包bin字段校验更严格，降级到v9可兼容旧版工具：

npm install -g npm@9

降级完成后重新执行原命令：

npm init wasm-app www

方案3：手动搭建www项目结构 #

若上述方案失效，可手动构建项目：

1. 创建并进入www目录：

   mkdir www && cd www
   

2. 初始化npm项目：

   npm init -y
   

3. 安装开发依赖：

   npm install --save-dev wasm-pack webpack webpack-cli webpack-dev-server
   

4. 在package.json的scripts中添加：

   "scripts": {
     "build": "webpack",
     "start": "webpack serve"
   }
   

5. 创建index.html和index.js文件，内容参考教程示例。

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