如何使用 Svelte 在 Storybook 中设置 Typescript？

Question

我正在尝试将 Storybook 与 Svelte 组件库一起使用。Svelte 设置为使用 Rollup。我想知道 Storybook 对 Webpack 的使用是否与我的问题有关？

• 只要我的 svelte 组件是用 JS 编写的，Storybook 就可以正常工作
• Svelte 已设置为可以与 TS 配合使用
• 即使在组件的脚本中添加一个简单的类型声明也会破坏 Storybook

例子：

我改变了这个：

<script lang="ts">
  export let text = ''
  export let sent = true
</script>

对此：

<script lang="ts">
  export let text: string
  export let sent: boolean
</script>

我收到此错误：

Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (2:17)
1: <script lang="ts">
2:   export let text: string
                    ^

Answer 1

为了为此配置 Storybooks Webpack，我更改.storybook/main.js为：（差异正在添加webPackFinal）：

module.exports = {
  webpackFinal: async (config) => {
    const svelteLoader = config.module.rules.find( (r) => r.loader && r.loader.includes('svelte-loader'))
    svelteLoader.options.preprocess = require('svelte-preprocess')()
    return config
  },
  "stories": [
    // "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    { name: "@storybook/addon-essentials", options: { docs: false } }
  ]
}

注意：Typescript/Svelte 不能很好地与__.stories.mdx您使用文档插件创建的文档配合使用。可能有某种方法可以为此设置自定义配置，但我当然无法弄清楚。