2

我刚刚创建了我的 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. 我的胆量说将整个故事书作为git+ssh://git@bitbucket.org/myusername/storybook-repo.gitfrom导入package.json不是一个好主意。有更好的解决方案吗？

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

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

谢谢

4

1 回答 1

5

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

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

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

于 2018-07-24T21:37:08.790 回答