Как импортировать и использовать класс TypeScript из модуля на моей странице HTML? ⇐ Javascript

[Anonymous]

Это кажется чем -то настолько элементарным, но я потратил так много времени, борясь с этим. Я прошел через десятки различных ресурсов, документов и вопросов переполнения стека, и если ответы, которые мне нуждались, были там, я скучал по ним среди множества заявленных решений, которые не работали. Любая помощь будет очень оценена. < /p>
Так что у меня есть класс в TypeScript. Моя цель - иметь возможность в теге сценария на HTML -странице, создать экземпляр этого класса и вызвать на него функцию. Ради актуальности, мы будем держать это простым: < /p>
import { MyDependency } from ...

export default class MyClass {
constructor(...) {
...
}

doSomething() {
var example = new MyDependency()
}
}
< /code>
На самом деле во многих файлах есть много классов, которые имеют зависимости как от друг друга, так и от различных пакетов NPM. С помощью некоторых запутанных методов, которые я хочу заменить, задавая этот вопрос, я знаю, что этот код работает и может быть выполнен в браузере. На случай, если это актуально, вот мой tsconfig: < /p>
{
"compilerOptions": {
...
"sourceMap": true,
"target": "ES2017",
"moduleResolution": "Node",
"module": "UMD",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"lib": [ "esnext", "dom" ]
}
...
}
< /code>
Мы запускаем Webpack на этом материале. Конфигурация WebPack выглядит так: < /p>
module.exports = {
entry: {
"my-class": path.resolve(__dirname, "./ts/my-directory/my-class.ts"),
"my-dependency": path.resolve(__dirname, "./ts/my-directory/my-dependency.ts")
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader"
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
}
],
},
resolve: {
alias: {
'node_modules': "/node_modules"
},
extensions: [".tsx", ".ts", ".js", ".css"]
},
output: {
filename: "[name].js",
libraryTarget: "umd",
library: "MyLibrary",
libraryExport: "default",
path: path.resolve(__dirname, "dist")
},
};
< /code>
Запуск Webpack с этим успешно генерирует файл my-class.js. < /p>
Наконец, один пример попытки вызвать это на странице : < /p>



var instance = new window.MyLibrary.MyClass()
instance.doSomething()

< /code>
Эта конкретная попытка не удается с сообщением, что он не может найти модуль для MyDepectendency, что, откровенно больше, чем большинство перестановки. Я испортился с импортом, импортом (), require (), экспозиционным загрузчиком и другими другими вещами; Обычно мне говорят, что модуль моего класса не существует, либо не содержит экспорта, называемого MyClass (что ясно делает My-Class.js, поэтому я думаю, что модуль не загружается правильно?).
Любые рекомендации, опять же, будут высоко оценены!

Подробнее здесь: https://stackoverflow.com/questions/794 ... -html-page