打字稿中的故事书配置

Posted 2023-02-19

【中文标题】打字稿中的故事书配置

【英文标题】：Storybook config in typescript

【发布时间】：2020-06-19 23:35:45

【问题描述】：

我想写故事书装饰器。有什么办法可以在打字稿中写和preview.js？

我已经成功地在 TS 中编写故事本身，现在想在 TS 中编写故事书配置。

【参考方案1】：

我终于成功了。

应添加配置目录以包含 typescript preset 和 tsconfig.json 的选项 将模块分辨率设置为“节点”，因为某些原因它被设置为配置文件夹的“经典”

另外，main.js 应该保留 JS 文件，因为只有在解析 main.js 配置后，storybook 才能使用 TS 预设。

【讨论】：

请澄清“应添加配置目录以包含 typescript preset 和 tsconfig.json 的选项”。你到底做了什么改变？在哪里改变？

更新：这对我有用，包括最新的故事书@6.3 中的main.ts。

@jorisw 他的意思是tsconfig.json里面有一个包含选项

【参考方案2】：

从故事书 6.3 开始，您可以在 typescript 中编写 main.ts 和 preview.ts。 请参阅此处的示例https://github.com/storybookjs/storybook/tree/next/examples/cra-ts-kitchen-sink/.storybook

但是，这里需要注意的是，您不能在典型的 tsconfig.json 中使用 "target": "ESNext"，因为节点本身还不支持 ES 模块。

如果您想要 ESNext，例如在 rollup 旁边使用故事书，则需要一种解决方法。我的方法是通过环境变量TS_NODE_PROJECT 将故事书配置为使用另一个tsconfig.json。例如

.storybook/tsconfig.json

  "extends": "..",
  "compilerOptions": 
    "module": "commonjs",
    "target": "ES2017"
  

然后运行cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook。

之所以起作用，是因为 Storybook 使用 webpack，而 webpack 又使用 tsconfig-paths 来解析 tsconfig.json 的路径。

【讨论】：

在 tsconfig-paths 和 TS_NODE_PROJECT 上不错。