将自定义库导入故事书

Question

我正在编写一个 TypeScript 库。我已经到了要测试所述库的地步。因为这是一个非常直观的东西，所以我选择使用故事书，这样我就可以展示我图书馆的不同功能。

我的包裹有一个index.ts，其中包含以下内容：

export { Container } from "./Container";

我的文件夹结构如下：

library/
    dist/
    src/
        index.ts
        Container.ts
    package.json
    storybook/
        stories/
        package.json

这是我的库的 package.json：

{
  "name": "@wesp/customcontainer",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
}

这是storybook文件夹的package.json的依赖：

"dependencies": {
  "@wesptest/customcontainer": "file: ../",
},

现在当我尝试使用自定义库时，例如 storybook/stories/test.stories.ts:

import {Container} from "@wesp/customcontainer";

但是故事会抛出这个错误：

_wesp_customcontainer__WEBPACK_IMPORTED_MODULE_1__.Container is undefined

我必须进行哪些更改才能成功导入此类？

谢谢。

-- 编辑--

我的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es2019",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "esModuleInterop": true,
    "outDir": "./dist",
    "declaration": true,
  },
  "include": ["./src"]
}

Answer 1

你的库的main 是dist/index.js。

Storybook 文件会尝试从 dist 目录导入，所以首先检查该目录中是否存在 js 文件。