为啥在另一个 Typescript 项目中导入时没有得到导出的对象？

Posted 2023-02-19

【中文标题】为啥在另一个 Typescript 项目中导入时没有得到导出的对象？

【英文标题】：Why am I not getting the exported Object when importing in another Typescript project?为什么在另一个 Typescript 项目中导入时没有得到导出的对象？

【发布时间】：2019-04-17 15:06:09

【问题描述】：

我正在尝试创建一个通过 Typescript 编写的 React 组件库，该组件库应导入另一个 Typescript 项目。准确地说，我想将一个 Analytics 图表库导入到 storybook 以进行演示和测试。

为此，我将这些依赖项用于库：

“打字稿”：“^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-proposal-object-rest-spread": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.5", 还有更多...

故事书还有这些额外的依赖项：

“@storybook/react”：“^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 中所定义）。。

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

非常感谢

沃尔特

编辑： Minimal project setup

在“analytics”文件夹中，运行“yarn install && yarn run dist” 转到文件夹“storybook”并运行“yarn install && yarn start-storybook” 打开浏览器并转到 localhost:6006 检查开发控制台 注意以“你去！”开头的消息 我希望有一个包含所有 Analytics 工厂的对象，而不是一个模块或未定义...

【问题讨论】：

根据您提供的信息，这对我来说很难重现。你能发布一个重现问题的存储库吗？

嗨，Matt，我担心该项目不是开源的，因此，我不能简单地在此处发布到存储库的链接。但是，我很乐意为您提供您可能需要的任何详细信息，例如 webpack.conf.js 或类似...

我不是要原始存储库，只是要一个重现相同问题的存储库；除了演示问题所需的最少量代码外，您可以删除所有代码。我知道这需要你做一些工作，但如果你这样做，我想我很有可能找到并解决问题，而我不愿意花时间向你询问更多细节一个时间，所以决定它是否值得你。或者你可以等着看有没有人愿意帮忙。

好的。我在上面附上了一个最小的设置和说明。非常感谢您的帮助。

【参考方案1】：

看起来问题在于您在analytics 上启用了静态代码拆分，因此Webpack 生成了两个包，vendors~Analytics.chunk.js 和Analytics.js。 Analytics.js 依赖于vendors~Analytics.chunk.js；要导入 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"