Почему я не получаю экспортированный объект при импорте в другой проект Typescript?

Question

Я пытаюсь создать библиотеку компонентов React, написанную с помощью Typescript, которая должна быть импортирована в другой проект Typescript. Если быть точным, я хотел бы импортировать библиотеку диаграмм Analytics в сборник рассказов для демонстрации и тестирования.

Для этого я использую эти зависимости для библиотеки:

• "машинопись": "^ 3.1.6"
• "webpack": "^ 4.15.1"
• "babel-loader": "^ 8.0.4"
• "ts-loader": "^ 5.3.0"
• "@ babel / core": "^ 7.1.5",
• "@ babel / runtime": "^ 7.1.5",
• "@ babel / plugin-offer-object-rest-spread": "^ 7.0.0",
• "@ babel / plugin-syntax-dynamic-import": "^ 7.0.0",
• "@ babel / preset-env": "^ 7.1.5",
• многое другое...

И я эти дополнительные зависимости для сборника рассказов:

• "@ storybook / реагировать": "^4.0.4"
• все остальные упомянутые выше
• многое другое...

Более того, у меня есть эти настройки в tsconfig.json моей библиотеки:

• "модуль": "esnext",
• "moduleResolution": "узел",
• "target": "es5" (это специально)
• и т.п.

Webpack генерирует аккуратный файл d.ts, который (помимо прочего) содержит:

declare module 'mylibrary' {
     import { BarChartFactory } from 'mylibrary/factories/barChartFactory';
     import { LineChartFactory } from 'mylibrary/factories/lineChartFactory';
     import { PieChartFactory } from 'mylibrary/factories/pieChartFactory';
     import { AreaChartFactory } from 'mylibrary/factories/areaChartFactory';
     import { RadarChartFactory } from 'mylibrary/factories/radarChartFactory';
     import { ScatterChartFactory } from 'mylibrary/factories/scatterChartFactory';
     import { GaugeChartFactory } from 'mylibrary/factories/gaugeChartFactory';
     import { HeatmapChartFactory } from 'mylibrary/factories/heatmapChartFactory';

     const Analytics: {
         "barChart": typeof BarChartFactory;
         "lineChart": typeof LineChartFactory;
         "pieChart": typeof PieChartFactory;
         "areaChart": typeof AreaChartFactory;
         "radarChart": typeof RadarChartFactory;
         "scatterChart": typeof ScatterChartFactory;
         "gaugeChart": typeof GaugeChartFactory;
         "heatmapChart": typeof HeatmapChartFactory;
     };
     export default Analytics;
}

И последнее, но не менее важное: libraryTarget - это UMD.

Теперь, когда я пытаюсь импортировать библиотеку в сборник рассказов следующим образом:

import * as Analytics from "mylibrary";

а затем сделать

console.log(Analytics)

я получил

Module
    Symbol(Symbol.toStringTag): "Module"
    __esModule: true
    __proto__: Object

в консоли. Это не совсем полезно, потому что я ожидаю, что объект, который я могу потреблять (как определено в d.ts).,

Итак, я, должно быть, делаю и / или неправильно понимаю что-то принципиально неправильное в отношении экспорта и импорта. Я очень ценю, если кто-то может указать верное направление. Дайте мне знать, если понадобится больше деталей.

большое спасибо

Вальтер

РЕДАКТИРОВАТЬ: минимальная настройка проекта

• В папке "аналитика" запустите "yarn install && yarn run dist"
• Перейдите в папку "storybook" и запустите "yarn install && yarn start-storybook"
• Откройте браузер и перейдите на localhost:6006
• Проверьте консоль разработчика
• Посмотрите на сообщение, которое начинается с "Вот, пожалуйста!"
• Я ожидаю, что есть Объект, содержащий все фабрики Analytics, а не Модуль или неопределенный...

Answer 1

Похоже, проблема в том, что вы включили статическое разбиение кода на analyticsпоэтому Webpack генерирует два пакета, vendors~Analytics.chunk.js а также Analytics.js, Analytics.js зависит от vendors~Analytics.chunk.js; для импорта Analytics.js чтобы вернуть полезное значение, вам придется вручную загрузить vendors~Analytics.chunk.js первый. Вы можете сделать это, добавив следующее в storybook/stories/1_overview.stories.tsx до ввоза analytics:

import "analytics/vendors~Analytics.chunk";

Но я не вижу, что вы надеетесь получить в этом сценарии, включив разделение кода и имея всех пользователей analytics библиотека делает этот дополнительный импорт. Я бы предложил отключить разделение кода, удалив из analytics/webpack.config.ts:

splitChunks: {
  chunks: "all"
}