如何在使用 Next.js 完成的外部项目中使用 Storybook 组件（和 Lerna）？

Question

我刚刚创建了我的 Storybook 组件库（ES6 等）。 它的结构是一个 Lerna 项目（所有组件都隔离在 packages/ 文件夹中）。但是，这是一个没有真正发布功能的私人仓库，所以我认为 Lerna 不能使用私人（免费）帐户。 我已将 Storybook 存储库按原样推送到我的 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. 我的直觉说从package.json 导入整个故事书为git+ssh://git@bitbucket.org/myusername/storybook-repo.git 不是一个好主意。有更好的解决方案吗？

2. Lerna 是否仅适用于我可以发布我的包的公共/专业存储库？

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

谢谢

Answer 1

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

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

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