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

Question

我刚刚创建了我的组件童话库(ES6等)。它被构造为一个Lerna项目(包/文件夹中隔离的所有组件)。然而，这是一个私人回购，没有真正的发布功能，所以，我认为Lerna将不会工作的私人(免费)帐户。我已经把故事书回购推到了我的比特桶里。

现在，我想使用来自主应用程序的组件的故事书库，这是一个在Next.js上构建的不同的repo (在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中导入为package.json并不是一个好主意。有更好的解决办法吗？
2. Lerna只对公共/专业人员的repos工作，我可以在那里发布我的包，这是真的吗？
3. 为什么Next.js不转移导入的jsx模块？此时，这个过程是如何工作的？我是从远程回购系统中传输故事书组件，还是从我的主要应用程序中完成这项工作？

谢谢

Answer 1

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

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

关于构建这个这里，有一个很好的指南。希望这能把你引向正确的方向。作为另一种选择，我相信您可以使用next.config.js来覆盖Webpack配置，并确保您的外部进口通过相同的Webpack被吸收，但是，您还必须在故事簿一侧的.babelrc中添加一些规则，以确保它在那里被忽略。我们发现只发布一个包并将所有东西打包起来就更容易了。