我刚刚创建了我的Storybook组件库(ES6等)。 它被构造为一个Lerna项目(所有组件都隔离在package /文件夹中)。但是,这是一个私人仓库,没有真正的发布功能,因此,我认为Lerna无法使用私人(免费)帐户。 我已经将故事书存储库原样推送到了我的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可以转译导入的模块,但事实并非如此。
我的问题是:
我的直觉说,从git+ssh://git@bitbucket.org/myusername/storybook-repo.git
中将整个故事书作为package.json
导入不是一个好主意。有更好的解决方案吗?
Lerna是否仅适用于我可以发布我的软件包的公共/专业软件仓库?
Next.js为什么不转译导入的jsx模块?此时,此过程如何工作?我应该从远程存储库中移植故事书的组件,还是从我的主应用程序中完成工作?
谢谢
答案 0 :(得分:2)
在我的上一个项目中,我们使用Rollup.js创建了仅由Storybook中开发的组件的dist版本。我们的组件位于src/components
目录中。我们使用内部脚手架工具为组件维护了index.js
。我们将dist
文件夹发布为私有NPM包,然后从那里拉入我们的组件。
对于本地开发,我们使用Webpack别名来检查当前环境,并拉出已发布的NPM软件包,或者直接从我们要构建的storybook/dist
文件夹中拉取。
在构建此here方面有很好的指南。希望这能为您指明正确的方向。另外,我相信您可以摆弄next.config.js
来覆盖Webpack配置,并确保通过同一Webpack吸收外部导入,但是,您还必须向{{1 }}在故事书方面,以确保在那儿被忽略。我们发现发布一个软件包并将所有内容捆绑在一起会更容易。