Question

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

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

“打字稿”：“ ^ 3.1.6”
“ webpack”：“ ^ 4.15.1”
“ babel-loader”：“ ^ 8.0.4”
“ ts-loader”：“ ^ 5.3.0”
“ @ babel /核心”：“ ^ 7.1.5”，
“ @ babel /运行时”：“ ^ 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”，
更多...

还有这些故事书的其他依赖项：

“ @故事书/反应”：“ ^ 4.0.4”
上面提到的所有其他
更多...

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

“模块”：“ esnext”，
“ moduleResolution”：“节点”，
“目标”：“ 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（分析）工厂的对象，而不是一个Module或未定义的对象...

Answer 1

问题似乎在于您已在MyStruct someObjects[5] = {0};上启用了静态代码拆分，因此Webpack会生成两个捆绑包analytics和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

导入另一个Typescript项目时，为什么没有得到导出的对象？

1 个答案: