将自定义库导入故事书

Posted 2023-02-19

【中文标题】将自定义库导入故事书

【英文标题】：Importing a custom library into a storybook

【发布时间】：2021-10-17 18:08:57

【问题描述】：

我正在编写一个 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"]

【参考方案1】：

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

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

【讨论】：

文件存在。

@wes.p 也试试包含 tsconfig

我包含了 tsconfig

也可能是 webpack 配置

我遵循的教程并没有说我需要 webpack，它只是告诉我使用tsc --watch