Web Worker, написанный на Typescript, не встраивается/не компилируется (с использованием vite) в Javascript

Я использую Web Worker в машинописном тексте следующим образом:

const url = new URL("src/lib/Functions/CalculateRidge.ts", import.meta.url);
const worker = new Worker(url, { type: 'module' })

В процессе разработки это работает отлично, рабочий процесс загружается с заданного URL-адреса, рабочий выполняет функцию и дает правильный результат. Но при сборке все файлы преобразуются в .js, кроме моего рабочего файла. Затем при развертывании (страницы Github), когда выполняется тот же код, что и выше, запрос URL-адреса выполняется успешно (он находит файл и делает для него действительный/успешный запрос), но код завершается с ошибкой со следующим сообщением об ошибке:

«Не удалось загрузить скрипт модуля: ожидался скрипт модуля JavaScript, но сервер ответил типом MIME «video/mp2t». Для скриптов модуля применяется строгая проверка типа MIME в соответствии со спецификацией HTML».

Я считаю, что эта ошибка возникает из-за того, что файл машинописного текста (файл с расширениями .ts) не может быть выполнен или прочитан, поэтому я считаю, что ошибка заключается в том, что файл машинописного текста Web Worker не компилируется/преобразуется в Javascript.

Это образ папки дистрибутива/сборки:

Я использую «vite build» для сборки проекта и «npx gh-pages -d dist» для развертывания проекта на страницах Github. vite.config.ts файл выглядит так:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  base: "/solar-analysis-faroe-island/",
  plugins: [svelte()],
  resolve: {
    alias: {
      src: path.resolve('src/'),
    }
  },
})

tsconfig.node.json выглядит так:

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node"
  },
  "include": ["vite.config.ts"]
}

tsconfig.json выглядит так:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "resolveJsonModule": true,
    "paths": {
      "src/*": [
        "src/*"
      ]
    },
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true
  },
  "include": ["src/*.ts","src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

А svelte.config.js выглядит так:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
372
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По этому поводу есть открытый вопрос; предлагаемый обходной путь — импорт через запрос ?worker&url, который будет таким:

import workerUrl from "src/lib/Functions/CalculateRidge?worker&url";
const worker = new Worker(workerUrl, { type: 'module' })

Актуальные документы

Я попытался импортировать URL-адрес, как вы указали, но теперь я получаю следующую ошибку при развертывании: «Неожиданный ранний выход. Это происходит, когда промисы, возвращаемые плагинами, не могут быть разрешены. Незавершенные действия хука при выходе: (vite: worker) transform " проект/местоположение/солнечный анализ-фарерские острова/src/lib/Functi‌​ons/CalculateRidge.t‌​s?worker&url"". Однако предложенное вами изменение все еще работает для разработки. Что может вызвать эту ошибку? А импорт работает только на верхнем уровне кода, верно? Потому что я не могу разместить импорт чуть выше const worker = ...

Ólavur Nón 18.04.2023 16:19

Я, к сожалению, никогда не видел эту ошибку раньше. И да, импорт должен быть на верхнем уровне, в других местах можно использовать динамический импорт, но здесь нет особого смысла, так как импорт просто предоставляет URL (т.е. сам импорт не загружает большое количество данных, которые возможно, стоит отложить загрузку позже).

H.B. 18.04.2023 16:31

Ну, это нехорошо... есть ли у вас какие-либо предложения о том, как я могу обойти эту ошибку? Я вижу, что один предлагает установить более старые версии накопительного пакета, но это не сработало для меня...

Ólavur Nón 19.04.2023 06:58

Вы видели проблему SvelteKit со ссылкой на связанную проблему Vite? Вот предлагаемый обходной путь, если это поможет, я добавлю его в ответ, пока проблема не будет решена.

H.B. 19.04.2023 07:38

Извините, я смотрю на свою проблему прямо сейчас, и я вижу, что я должен был упомянуть, что я храню как код, который создает воркер, так и сам воркер внутри одного скрипта. Причина: так весь worker-код находится в одном файле. Я отделил файл, и я считаю, что это решило проблему. Но теперь появилась новая проблема, касающаяся GeoTiff.js в сборке, я открою новую проблему.

Ólavur Nón 19.04.2023 07:50

Новый вопрос: stackoverflow.com/questions/76051452/…

Ólavur Nón 19.04.2023 08:44

Другие вопросы по теме