reactjs - 如何在使用 Next.js 完成的外部项目中使用 Storybook 组件(和 Lerna)？

Question

我刚刚创建了我的 Storybook 组件库(ES6 等)。它的结构为 Lerna 项目(所有组件都隔离在 packages/文件夹中)。然而，这是一个私有(private)存储库，没有真正的发布功能，因此，我认为 Lerna 无法使用私有(private)(免费)帐户。我已将故事书存储库按原样推送到我的 Bitbucket。

现在，我想使用主应用程序中的故事书组件库，该库是基于 Next.js 构建的不同存储库(在 Bitbucket 上)。

我尝试按如下方式导入各个故事书组件

import MyComponent from 'storybook-repo/packages/my-component/my-component';

但它显然不起作用，返回此错误:

Module parse failed: Unexpected token (8:9)
You may need an appropriate loader to handle this file type.

这个，因为 MyComponent是一个jsx文件。我希望 Next.js 能够转译导入的模块，但事实并非如此。

我的问题是:

1. 我的直觉告诉我整个故事书的重要性为 git+ssh://git@bitbucket.org/myusername/storybook-repo.git来自package.json这不是一个好主意。还有更好的解决方案吗？

2. Lerna 真的只适用于我可以发布软件包的公共(public)/专业存储库吗？

3. 为什么 Next.js 不转译导入的 jsx 模块？那么这个过程是如何进行的呢？我应该从远程存储库转译故事书组件还是从我的主应用程序完成这项工作？

谢谢

Answer 1

在我的上一个项目中，我们使用 Rollup.js 来创建我们在 Storybook 中开发的组件的 dist 版本。我们的组件位于 src/components 目录中。我们使用内部脚手架工具为组件维护了一个 index.js。我们将 dist 文件夹发布为私有(private)范围的 NPM 包，然后从那里提取我们的组件。

对于本地开发，我们使用 Webpack 别名来检查当前环境，并拉取已发布的 NPM 包或直接从我们正在构建的 storybook/dist 文件夹中拉取。

有一个很棒的构建指南 here 。希望这能为您指明正确的方向。作为替代方案，我相信您可以摆弄 next.config.js 来覆盖 Webpack 配置，并确保您的外部导入通过同一个 Webpack 吸收，但是，您还必须添加Storybook 端的 .babelrc 上有一些规则，以确保它在那里被忽略。我们发现仅发布一个包并将所有内容捆绑在一起会更容易。