在另一个Typescript项目中导入时，为什么无法获得导出的对象

Question

我正在尝试创建一个通过Typescript编写的React组件库，该库将导入另一个Typescript项目。确切地说，我想将分析图表库导入到故事书中，用于演示和测试目的。

为了做到这一点，我为库使用了以下依赖项：

• "typescript"："^3.1.6">
• "webpack"："^4.15.1">
• "babel加载器"："^8.0.4">
• "ts加载程序"："^5.3.0">
• "@babel/core"："^7.1.5">
• "@babel/runtime"："^7.1.5">
• "@babel/plugin提案对象rest spread"："^7.0.0">
• "@babel/plugin语法动态导入"："^7.0.0">
• "@babel/preset-env"："^7.1.5">
• 更多

我为故事书提供了这些额外的依赖项：

• "@storybook/areact"："^4.0.4">
• 上面提到的所有其他
• 更多

此外，我在库的tsconfig.json中有以下设置：

• "模块"："esnext">
• "moduleResolution"："node">
• "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中所定义的(。.

所以，我一定在做和/或误解一些关于出口和进口的根本错误的事情。如果有人能指出正确的方向，我将不胜感激。如果需要更多细节，请告诉我。

非常感谢

Walter

编辑：最小项目设置

• 在文件夹"analytics"中，运行"yarn install&&yarn run dist">
• 转到文件夹"故事书"并运行"纱线安装和纱线启动故事书">
• 打开浏览器并转到localhost:606
• 检查开发控制台
• 留意以"给你！"开头的信息
• 我希望有一个对象包含所有的分析工厂，而不是一个模块或未定义的

Answer 1

问题似乎是在analytics上启用了静态代码拆分，因此Webpack生成了两个捆绑包，vendors~Analytics.chunk.js和Analytics.js。CCD_ 4依赖于CCD_；为了使Analytics.js的导入返回有用的值，您必须首先手动加载vendors~Analytics.chunk.js。您可以在导入analytics之前将以下内容添加到storybook/stories/1_overview.stories.tsx中：

import "analytics/vendors~Analytics.chunk";

但我看不出在这种情况下，通过启用代码拆分并让analytics库的所有用户进行额外的导入，您希望得到什么。我建议通过从analytics/webpack.config.ts中删除以下内容来关闭代码拆分：

splitChunks: {
  chunks: "all"
}