wasm-app 踩坑

wasm-app 踩坑

最近使用 Rust 开发 Web 应用程序，尝试使用 wasm-app 模板创建一个简单的 Web 应用程序。

先使用wasm-pack创建一个新的 Rust 项目

1
wasm-pack new wasm-test

然后进入项目目录

1
cd wasm-test

接着使用wasm-pack build命令构建项目

1
wasm-pack build

然后进入wasm-test目录下的www目录，使用以下命令创建一个新的 Web 应用程序：

1
cd www
1
npm init wasm-app www

结果报错

1
2
3
$ npm init wasm-app www
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\XU Dong\AppData\Local\npm-cache\_logs\2025-03-31T13_22_00_540Z-debug-0.log

解决方法

在官方仓库的issue发现这是个共性问题，可能是npm版本的问题。

我的npm版本是10.8.2

1
2
$ npm -v
10.8.2

于是我尝试将npm降级到10.7.0版本，使用以下命令：

1
npm install -g npm@10.7.0

然后重新运行npm init wasm-app www命令，成功创建了新的 Web 应用程序。

1
2
3
4
5
6
7
8
9
10
$ npm init wasm-app www
Need to install the following packages:
create-wasm-app@0.1.0
Ok to proceed? (y) y


> npx
> create-wasm-app www

🦀 Rust + 🕸 Wasm = ❤

然后在www/package.json添加对应的依赖

1
2
3
4
5
6
7
8
9
10
11
{
  ...
  "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
  "dependencies": {
    "wasm-test": "file:../pkg"
  },
  "devDependencies": {
    ...
  }
  ...
}

同时在www/index.js中的import改为对应project name

1
import init, { greet } from "wasm-test";

然后在www目录下运行npm install命令安装依赖。

1
npm install

新的问题

当运行npm run start命令时，出现了以下错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ npm run start

> create-wasm-app@0.1.0 start
> webpack-dev-server

(node:17452) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\rustproject\wasm-test\www
node:internal/crypto/hash:79
  this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\rustproject\wasm-test\www\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\rustproject\wasm-test\www\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\rustproject\wasm-test\www\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\rustproject\wasm-test\www\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\rustproject\wasm-test\www\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\rustproject\wasm-test\www\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\rustproject\wasm-test\www\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (D:\rustproject\wasm-test\www\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\rustproject\wasm-test\www\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at D:\rustproject\wasm-test\www\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9
    at D:\rustproject\wasm-test\www\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v23.6.1

于是查看版本

1
2
3
4
5
6
7
8
$ npm list
create-wasm-app@0.1.0 D:\rustproject\wasm-test\www
├── copy-webpack-plugin@5.1.1
├── hello-wasm-pack@0.1.0
├── wasm-test@npm:pkg@0.1.0 -> .\..\pkg
├── webpack-cli@3.3.12
├── webpack-dev-server@3.11.0
└── webpack@4.43.0

发现是webpack@4.43.0版本的问题。

于是升级

1
2
$ npm uninstall webpack webpack-cli webpack-dev-server copy-webpack-plugin
npm install webpack@5 webpack-cli@4 webpack-dev-server@4 copy-webpack-plugin@10 --save-dev

然后运行npm i和npm run start命令

1
2
3
4
5
6
7
8
9
$ npm run start

> create-wasm-app@0.1.0 start
> webpack-dev-server

[webpack-cli] Failed to load 'D:\rustproject\wasm-test\www\webpack.config.js' config
[webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] should be an object:
   object { patterns, options? }

查看后发现是webpack.config.js文件中的copy-webpack-plugin的配置不符合API要求，升级到高版本后，旧语法会出错

修改对应webpack.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
  entry: "./bootstrap.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bootstrap.js",
  },
  mode: "development",
  experiments: {
    asyncWebAssembly: true,
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: "./index.html", to: "./" }
      ]
    })
  ],
};

接着运行npm run start命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$ npm run start

> create-wasm-app@0.1.0 start
> webpack-dev-server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.27.11.108:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::e1f5:bf6e:7209:b01b]:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\rustproject\wasm-test\www\public' directory      
assets by path *.js 217 KiB
  asset bootstrap.js 210 KiB [emitted] (name: main)
  asset index_js.bootstrap.js 6.2 KiB [emitted]
asset cf750cde85308290c866.module.wasm 1.41 KiB [emitted] [immutable]
asset index.html 297 bytes [emitted] [from: index.html] [copied]
runtime modules 33.5 KiB 16 modules
modules by path ./ 129 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.17 KiB 4 modules
  modules by path ./node_modules/html-entities/dist/esm/*.js 33.5 KiB 4 modules
  modules by path ./*.js 329 bytes
    ./bootstrap.js 279 bytes [built] [code generated]
    ./index.js 50 bytes [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ../pkg/ 1.4 KiB (javascript) 1.41 KiB (webassembly)
  ../pkg/wasm_test.js 179 bytes [built] [code generated]
  ../pkg/wasm_test_bg.wasm 70 bytes (javascript) 1.41 KiB (webassembly) [built] [code generated]
  ../pkg/wasm_test_bg.js 1.15 KiB [built] [code generated]
webpack 5.98.0 compiled successfully in 2088 ms

成功运行！😘😻

访问http://localhost:8080/，可以看到页面正常显示。

alt text

参考

rustwasm