2

我正在尝试创建一个通过 Typescript 编写的 React 组件库，该组件库应导入另一个 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-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": "节点",
  • “目标”：“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
  • 检查开发控制台
  • 留意以“你去！”开头的消息。
  • 我希望有一个包含所有分析工厂的对象，而不是一个模块或未定义的......
4

1 回答 1

1

看起来问题是您在 上启用了静态代码拆分analytics，因此 Webpack 生成了两个包，vendors~Analytics.chunk.js并且Analytics.js. Analytics.js取决于vendors~Analytics.chunk.js; 要使 importAnalytics.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"
}
于 2018-11-14T23:19:24.463 回答