Невозможно инициировать класс из скомпилированного модуля TypeScript / NPM / Webpack

Почему-то я не мог задать вопрос, не получив ошибки, связанной с неправильной разметкой кода, поэтому я переместил большую часть его на GitHub здесь: https://github.com/JoepBC/typescript-packages-example-error

Проблема сводится к следующему: используя структуру пакета, как на GitHub (с использованием TypeScript, webpack и ts-loader), у меня есть два пакета, LibA и LibB, где LibB хочет загружать объекты из скомпилированного кода LibA TS-> JS ( Файлы определения .d.ts для LibA создаются нормально).

Код для ~ / A / src / index.ts выглядит следующим образом:

import {TestExport} from './test_export.ts';
export class Foo extends TestExport {
    constructor(text:string) {
        super(text);
        console.info("added by the extended class");
    }
}
let a = new Foo('bar');

Код для ~ / A / src / test_export.ts:

export class TestExport {
    constructor(text:string) {
        console.info("TestExport constructor argument:"+text);
    }
}

Источник для ~ / B / src / index.ts:

import * as LibA from 'liba';
console.info('----');
let a = new LibA.Foo('arg1');

Сгенерированный код javascript для Lib A работает должным образом. Lib B пытается импортировать из A (поскольку A импортирует из другого файла [хотя и не скомпилированный] в пределах тех же пакетов), а код javascript из A может быть запущен в B, но в BI не может инициировать новый объект из класса из А.

Результат при запуске B:

~/B/dist $ node index.js 
TestExport constructor argument:bar
added by the extended class
----
webpack:///./src/index.ts?:5
var a = new LibA.Foo('arg1');
        ^
TypeError: LibA.Foo is not a constructor
    at eval (webpack:///./src/index.ts?:5:9
    at Object../src/index.ts (~/B/dist/index.js:108:1)
    at __webpack_require__ (~/B/dist/index.js:20:30)
    at ~/B/dist/index.js:84:18
    at Object. (~/B/dist/index.js:87:10)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)

Различные способы запроса / импорта A внутри B, похоже, тоже не работают ... Как это сделать? Заранее спасибо.

Похоже, что импорт одного пакета Webpack непосредственно в другой проект Webpack не работает, но есть несколько вариантов. См. эта ветка.

Matt McCutchen 21.08.2018 21:02

Спасибо за ответ, Мэтт. Импорт сгенерированного javascript действительно работает, и статический код выполняется нормально. Вызов функций или использование классов из A кажется проблематичным. Когда компилятор TypeScript вызывается без использования webpack и выполняется исходный код javascript, возникает та же проблема.

JoepBC 22.08.2018 09:41

примеры кода машинописного и javascript и вывода обновляются в github.com/JoepBC/typescript-packages-example-error/blob/master /…

JoepBC 22.08.2018 09:52

Когда код .ts для liba и libb компилируется в .js вручную, без использования npm или webpack, он работает должным образом: github.com/JoepBC/typescript-packages-example-error/tree/mas ter /…. Итак, где-то в процессе webpack препятствует "нормальному" импорту liba внутрь libb.

JoepBC 22.08.2018 10:58

По сути, проблема в том, что пакет Webpack предназначен для разрешения внутренних ссылок между включенными модулями, но ничего не экспортирует. Статический код будет работать, но вы не сможете получить доступ к функциям или классам. Вам нужно будет использовать другой подход; см. ветку, на которую я ссылался выше, для альтернатив.

Matt McCutchen 22.08.2018 17:23

Я почти уверен, что это можно сделать с правильными параметрами конфигурации (но я не могу понять, какие из них, это такой обширный непонятный беспорядок, над которым нужно работать). Теперь я решил использовать компилятор tsc для компиляции библиотек (liba в примере) и webpack (с ts-loader и typescript) для компиляции окончательного приложения с машинописным текстом, которое будет использоваться из браузера. Это работает, но это обходной путь. Спасибо, что подумали вместе со мной.

JoepBC 22.08.2018 17:41
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
6
50
0

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