ไม่สามารถโหลดแอปพลิเคชัน wasm

Question

ฉันกำลังพยายามโฮสต์เว็บไซต์และฉันใช้ไฟล์. wasm กับสคริปต์. js ที่สร้างโดยเครื่องมือ wasm-pack

ฉันทดสอบโปรเจ็กต์ในเครื่องด้วยnpmและnode.jsและทุกอย่างทำงานได้ดี

แต่จากนั้นฉันโฮสต์มันบนราสเบอร์รี่ (apache2) และเมื่อฉันพยายามเข้าถึงฉันได้รับข้อผิดพลาดต่อไปนี้:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/wasm". Strict MIME type checking is enforced for module scripts per HTML spec.

รายละเอียด

มีหลายไฟล์ แต่นี่คือแนวคิด:

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';

---

ปัญหาอยู่ที่ไหน

วิธีที่ถูกต้องในการโหลดไฟล์ประกอบเว็บคืออะไร?

Answer 1

ในที่สุดฉันก็พบวิธีที่ถูกต้องในการโหลดแอปพลิเคชัน wasm ในwasm-bindgenโปรเจ็กต์!

ในความเป็นจริงทุกอย่างอยู่ในหน้านี้

เมื่อคุณคอมไพล์โปรเจ็กต์โดยไม่ต้องการรันด้วยบันเดิลเลอร์คุณต้องรัน wasm-pack build ด้วยแฟล็ก --target

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)

คุณรวม index.js ไว้ในไฟล์ HTML ของคุณ

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

แล้วมันก็ได้ผล!