是否可以将wasm-bindgen与webpack 5一起使用

Question

我遵循了wasm bindgen的Hello World指南(我使用的是wasm-bindgen = "0.2.72"(。

不幸的是，指南中提到的npm软件包并不是最新的。因为我想有一个干净的起点，我试着升级它们。

这就是指南中提到的package.json：

{
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"devDependencies": {
"@wasm-tool/wasm-pack-plugin": "1.0.1",
"text-encoding": "^0.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.4",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
}
}

我删除了text-encoding(因为我不在乎不支持Edge的非Chromium版本(，并升级了@wasm-tool/wasm-pack-plugin，但没有出现问题：

工作package.json:

{
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"devDependencies": {
"@wasm-tool/wasm-pack-plugin": "^1.3.3",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.4",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
}
}

工作webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, ".")
})
],
mode: 'development'
};

我做的下一件事是升级html-webpack-plugin和webpack本身。

出现错误的版本的package.json：

{
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"devDependencies": {
"@wasm-tool/wasm-pack-plugin": "^1.3.3",
"html-webpack-plugin": "^5.3.1",
"webpack": "^5.27.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
}
}

因为我将webpack升级到了5.27.1版本，所以我还必须像这样更改webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, ".")
})
],
experiments: {
asyncWebAssembly: true
},
mode: 'development'
};

现在，当我运行npm run serve时，构建完成时没有错误，但当我打开网页时，不再显示警报。在浏览器控制台中，现在记录以下错误：

TypeError: _index_bg_wasm__WEBPACK_IMPORTED_MODULE_0__ is undefined
greet webpack:///./pkg/index_bg.js?:113
<anonymous> webpack:///./index.js?:4
promise callback* webpack:///./index.js?:4
js http://localhost:8080/index.js:18
__webpack_require__ http://localhost:8080/index.js:366
<anonymous> http://localhost:8080/index.js:709
<anonymous> http://localhost:8080/index.js:712

我必须做些什么才能解决这个问题，这样我才能将wasm-bindgen与webpack ^5.27.1一起使用？

我感谢你的任何暗示。

附加观察

有趣的是，我发现，即使是不工作的版本，也可以从index.js中删除m => m.greet('World!')，而从pkg/index.js中调用wasm函数，就像这个一样

import * as wasm from "./index_bg.wasm";
export * from "./index_bg.js";
wasm.greet("World");

当我这样做时，我在控制台中不会再出现错误，并且会显示"；你好"(错过了"世界"(，所以我认为.wasm应该还可以。。。

更新

我能够通过使用使一切恢复正常

experiments: {
syncWebAssembly: true
},

然而，这是不推荐使用的，所以如果有一种方法仍然使用asyncWebAssembly，那就太好了。

Answer 1

是的，它现在得到了官方支持，于2021年8月10日提交给主分支。请注意，截至2022年12月，如果您从wasm-bindgen GitHub进行克隆，则需要从wasm-bindgen根目录中复制示例，请参阅相关问题。在继续使用npm run serve之前，不要忘记使用npm i

Answer 2

我通过以下方式加载应用程序，使其正常工作。

我的webpack条目配置如下：

entry: {
wasm: ['./src/bootstrap.js'],
vendor: ['react', 'react-dom'],
},

引导文件如下所示：

import('./index.tsx').catch(e =>
console.error('Error importing `index.getStringX`:', e),
);

在我的React应用程序中，我加载了安装了npm的wasm包，如下所示：

import * as wasm from 'myRustWebAssemblyPackedPackage';

这就是我所做的。我在Webpack中不使用任何插件。