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

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

0 голосов
/ 14 ноября 2018

Я пытаюсь создать библиотеку компонентов 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;
}

И последнее, но не менее важное: цель библиотеки - UMD.

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

import * as Analytics from "mylibrary";

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

console.log(Analytics)

Я получаю 

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

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

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

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

Walter

EDIT: Минимальная настройка проекта

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

1 Ответ

0 голосов
/ 15 ноября 2018

Похоже, проблема в том, что вы включили статическое разбиение кода на 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"
}
...