如何使用 Svelte 在 Storybook 中设置打字稿？答案

【问题标题】：How can typescript be setup in Storybook with Svelte?如何使用 Svelte 在 Storybook 中设置打字稿？
【发布时间】：2021-03-14 21:54:34
【问题描述】：

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

只要我的苗条组件是用 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
                    ^

【问题讨论】：

标签： typescript webpack svelte storybook rollup

【解决方案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 不能很好地与您可以使用 docs 插件创建的 __.stories.mdx 文档配合使用。可能有一些方法可以为此设置自定义配置，但我当然想不通。

【讨论】：