Как создать проект Vue+Vite, который содержит веб -работника и WASM?Javascript

Форум по Javascript
Ответить
Anonymous
 Как создать проект Vue+Vite, который содержит веб -работника и WASM?

Сообщение Anonymous »

В моем проекте у меня есть веб-работник по адресу ./src/test.worker.js , который выглядит так:
import("mywasm").then(wasm => {
self.onmessage = event => {
const { x, y } = event.data
const z = wasm.func(x, y)
self.postMessage({ z })
}
})
< /code>
Я импортирую его в компоненте VUE Таким образом: < /p>

import TestWorker from '@/test.worker.js?worker'
...
const worker = new TestWorker()
worker.onmessage = event => {
console.log(event.data)
}
...
worker.postMessage({x: 25, y: 36})
...


Если я запускаю этот проект при разработке с помощью NPM Run Dev (в package.json у меня есть scripts.dev: vite и scripts.build: vite build ), все работает файл. Но если я строю с помощью node_env = производство NPM Run Build , я получаю ошибку:
error during build:
[vite:worker] The "path" argument must be of type string. Received undefined
file: /home/myuser/Development/myproj/src/test.worker.js?worker

Это заставляет меня думать, что на стадии сборки Vite забывает, что? Worker не является частью имени файла, поэтому он не может найти точное имя test.worker.js? Worker , потому что вместо этого test.worker.js существует. Как мне это исправить? . Или есть способ создать проект точно так же, как и Vite в режиме сервера разработки? Или, может быть, я что-то забыл в конфигурации Vite-Plugin-Wasm?import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import wasm from "vite-plugin-wasm"
import topLevelAwait from "vite-plugin-top-level-await"

// https://vite.dev/config/
export default defineConfig({
build: {
target: 'esnext',
},
plugins: [
vue(),
vueDevTools(),
wasm(),
topLevelAwait(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
worker: {
plugins: [
wasm(),
topLevelAwait(),
],
},
})

и my package.json :
{
"name": "myproj",
"version": "1.0.0",
"private": true,
"type": "module",
"description": "",
"author": "",
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"mywasm": "file:../mywasm/mywasm-pkg",
"vite-plugin-top-level-await": "^1.5.0",
"vite-plugin-wasm": "^3.4.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.0",
"vite": "^5.4.11",
"vite-plugin-vue-devtools": "^7.7.2"
}
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... r-and-wasm
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»