描述问题
在尝试解决 Storybook 支持 Svelte 4 和 Storybook 8 的问题时,我遇到了一些问题。
当尝试创建一个新的 turbo + sveltekit + pnpm 单仓库时,storybook init
失败了。
请查看相关联的仓库以获取更多详细信息。
复现链接
https://github.com/cge-taal/test-sveltekit-storybook
复现步骤
- 无响应*
系统环境
Storybook Environment Info:
System:
OS: macOS 13.5.1
CPU: (10) arm64 Apple M1 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.14.0 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.7.0 - /usr/local/bin/npm
pnpm: 9.4.0 - /opt/homebrew/bin/pnpm <----- active
Browsers:
Safari: 16.6
其他相关信息
- 无响应*
7条答案
按热度按时间xdyibdwo1#
免责声明
由于信息是自动生成的,可能存在不准确的情况。
要解决在 turbo + sveltekit + pnpm monorepo 中与
storybook init
相关的问题,请按照以下步骤操作:preset.js
在/code/frameworks/sveltekit
中:确保配置与您的 monorepo 设置相符。如有必要,请调整路径。
tsconfig.json
:验证
/code/frameworks/sveltekit/tsconfig.json
中的 TypeScript 设置,以确保与您的项目结构兼容。vitest.config.ts
:确认
/code/frameworks/sveltekit/vitest.config.ts
中的 Vitest 配置已正确设置为您的 monorepo。这些步骤应该有助于解决您特定设置中的初始化问题。
参考资料
/code/frameworks/sveltekit
/docs/_snippets/sveltekit-install.md
/docs/_snippets/svelte-vite-install.md
/docs/_snippets/svelte-webpack5-install.md
/docs/_snippets/storybook-init-v7.md
/docs/_snippets/init-command.md
/docs/_snippets/init-command-manual-framework.md
关于 Greptile
此响应为您提供了研究的起点,而非精确的解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。
o75abkj42#
以下是一些建议:
pnpm dlx storybook@8.1 init --type sveltekit
。我们在8.2版本中进行了大量的改进,但可能仍然存在问题。我尝试了这个,并在.svelte
文件附近遇到了不同的错误。ui
包添加一个 Vite 配置文件——目前还没有,但我认为必须有这样的配置文件才能处理.svelte
文件。6gpjuf903#
非常感谢@shilman - 我承认我故意只尝试坚持基本原则,作为对SvelteKit及其周边生态系统成熟度的测试。很高兴收到您的反馈,关于Storybook的8.2版本在SvelteKit支持方面仍然有些粗糙 - 就这一点而言。
我会将ui包更新为更接近我手头另一个版本的内容 - 它类似于所谓的“SvelteKit库 backbone 项目”(或类似)。
希望最终结果是在哪个版本的库中保持一致以获得完整的集成能力。
有了这个知识,也许甚至turborepo也可以更新,为其SvelteKit启动器包含更现实的基本内容。
ghhaqwfi4#
顺便说一下,我的真实用例是在上面提到的monorepo环境中让Storybook完全工作。
据我所知,Storybook仍然需要使用
addon-svelte-csf
插件来启用Svelte/SvelteKit的故事?对于Storybook >= 8,这是否仍然适用?需要支持
<slot/>
吗?实际的工作示例将是非常有益的。我看到的主要是开放式票据,而且并不是很清楚要使用哪些库和API的哪个版本。
相关票据:storybookjs/addon-svelte-csf#188
pu82cl6c5#
对不起@shilman,我当时正忙于其他事情。所以我尝试了你的建议。以下是我的步骤:
在这一点上,我完全按照你的建议做了:
SvelteKit在项目模板中找不到 - 请查看附件。
这让我相信工具中没有SvelteKit支持,而且我找不到一个最新的例子可以正常工作。我的下一步行动将包括“尝试很多不同的事情,进行大量的错误试验”,正如Svelte Discord上的某人建议的那样。
xxslljrj6#
@cge-taal 典型的使用
npx storybook@latest init
的方式是在包含组件的现有项目目录中运行,而不是在空目录中。当你在一个空目录中运行它时,它首先会引导一个你选择的项目,然后将 Storybook 安装到其中。正如你在截图中的空文件夹 init 上方所说:
ct3nt3jp7#
再次感谢@shilman的持续帮助。是的,我确实创建了一个仓库来说明你建议的内容:https://github.com/cge-taal/storyrepo
在这里重复步骤
然后
pnpm dlx storybook@latest init --type sveltekit
,因为8.1版本也给我带来了问题。我很乐意帮助调试这个环境设置,并为这个环境设置一个明确的路径。请不要犹豫地提出更多我可以尝试的事情。谢谢!