apache 无法在Web应用程序中加载wasm文件

gk7wooem  于 2023-08-07  发布在  Apache
关注(0)|答案(1)|浏览(320)

我正在尝试托管一个网站,我使用一个.wasm文件和由wasm-pack工具创建的.js脚本。
我在本地用 npm 和 * node.js * 测试了这个项目,一切都很好。
但后来我把它托管在树莓(apache 2)上,当我尝试访问它时,我得到了以下错误:
第一个月

详情

有多个文件,但这里是想法:
我的index.html加载模块bootstrap.js

// bootstrap.js content
import("./index.js").catch(e => console.error("Error importing `index.js`:", e));

字符串
我的主要代码在index.js中,它调用test_wasm_bg.js
最后,test_wasm_bg.js加载wasm文件,其中包含以下行:

// test_wasm_bg.js first line
import * as wasm from './test_wasm_bg.wasm';


问题出在哪里?
加载Web程序集文件的正确方法是什么?

e5nszbig

e5nszbig1#

我终于找到了在wasm-bindgen项目中加载wasm应用程序的正确方法!
实际上,所有内容都在this page
当您编译项目而不想使用bundler运行它时,您必须使用--target标志运行wasm-pack build。
wasm-pack build --release --target web的值。
这将创建一个.js文件(在我的示例中为pkg/test_wasm.js),其中包含加载wasm应用程序所需的所有内容。
下面是如何使用wasm-bindgen(index.js)创建的函数:

import init from './pkg/test_wasm.js';
import {ex_function, ex_Struct ...} from '../pkg/test_wasm.js';

function run {
    // use the function ex_function1 here

}

init().then(run)

字符串
您可以在HTML文件中包含index.js

<script type="module" src="./index.js"></script>


然后它的工作!

编辑:

现在我对JavaScript生态系统有了更多的了解,我可以试着解释一下我所理解的:在js中有很多方法可以进行导入,这里有一个列表:https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
您不需要了解太多,只需要知道wasm-pack的默认目标是一个节点样式ecmascript module。此导入将在node.js中工作,但不能直接在浏览器中工作。因此,在node中,您可以直接从wasm文件导入函数,如下所示:import {ex_function} from "./test.wasm"
但是这些导入样式现在在浏览器中不起作用。也许这将是可能的in the future但现在,您的浏览器只知道有关js模块。因此,如果您尝试在浏览器中直接导入.wasm文件,它将抛出mime类型错误,因为它不知道如何处理webassembly文件。
你用来从ecmascipt模块(例如很多nmp包)到一个js文件的工具叫做web-bundler(webpack,rollup,snowpack...)。如果你在一个大项目中使用npm,你可能需要一个。否则,“--target web”将告诉wasm-bindgen示例化wasm模块the right way(查看pkg/test_wasm.js

相关问题