Импорт перечислений машинописи в контекст vue / browser выдает ошибки или требует зависимостей

Question

У меня проблема с импортом определений типов из отдельного модуля во время работы в Vue.

Вот краткое описание typedefs, которые я пытаюсь импортировать:

import { Server, createServer } from "net";

export namespace Testable {
  export interface t {
    1: string,
    apple: boolean
  }

  export const enum b {
    butter,
    fly,
    moth
  }

  export class apple extends Server {

  }
}

Я могу импортировать пространство имен Testable и импортировать / использовать интерфейс t, но если я попытаюсь использовать enum b, я получаю ошибки в Vue / webpack

TypeError: Super expression must either be null or a function

Это, конечно, пример кода, но с использованием живого кода, который имеет класс базы данных, Vue / webpack сказал, что мне нужны cldr, dns и другие зависимости пакетов:

 ERROR  Failed to compile with 21 errors                                                                                                                               2:00:58 PM

These dependencies were not found:

* cldr in ./node_modules/globalize/dist/globalize.js, ./node_modules/globalize/dist/globalize/message.js and 6 others
* cldr/event in ./node_modules/globalize/dist/globalize.js, ./node_modules/globalize/dist/globalize/message.js and 5 others
* cldr/supplemental in ./node_modules/globalize/dist/globalize/relative-time.js, ./node_modules/globalize/dist/globalize/plural.js and 3 others
* handlebars in ./node_modules/......

Опять же, Я только пытаюсь импортировать перечисление, а не класс nodejs для использования в браузере.

Любая помощь будет принята с благодарностью! Может быть, я должен структурировать свой проект немного по-другому, советы по этому также будут полезны!

Answer 1

Модуль будет скомпилирован в:

export var Testable;
(function (Testable) {
    class apple extends Server {
    }
    Testable.apple = apple;
})(Testable || (Testable = {}));

Пространство имен представлено как IIFE и приводит к побочному эффекту. Это приводит к оценке всего модуля при импорте.

Кроме того, в ES6 нет реальной необходимости в пространствах имен TypeScript, потому что модули ES уже действуют как пространства имен.

Потрясение дерева может улучшиться, если пространства имен не используются. Модуль должен быть по крайней мере помечен как свободный от побочных эффектов для Webpack. Webpack встряхивание дерева сильно зависит от того, как построено приложение, неиспользованный class apple extends Server ... все еще может быть оценен. Обратите внимание, что в этом случае usedExports встряхивание дерева неэффективно, поскольку оно опирается на минификатор, который может быть отключен при разработке.

В этом случае предпочтительно не полагаться на дрожание дерева и хранить типы в отдельном модуле, это позволяет импортировать их напрямую.