如何使用 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文檔。 可能有一些方法可以為此設置自定義配置，但我當然無法弄清楚。