我在一个React组件库上工作，这些组件将在各种Next.js项目中使用。我希望这个库中的组件以RSC的方式编写，这意味着基础将是服务器的，只有一些节点将在它们之上有“使用客户端”指令，以提供交互性。
目前，我有问题，捆绑这样的图书馆的方式，我想。
我使用Vite.js来制作bundle，由于Vite是在Rollup之上构建的，因此Rollup解决方案（https://github.com/stropho/rollup-plugin-banner2）可以在整个bundle之上添加“use client”指令，将所有组件标记为“client”组件。
这确实使组件可用，但另一方面放弃了React Server组件的所有优势。
这种“全有或全无”的解决方案似乎对我不好。
目前为止我尝试过的东西：
1.分发库源代码而不是其捆绑包，并在next.config.js中使用transpilePackages: ['ui-library'],。由于我的next.js应用程序和UI库包中的typescript绝对路径设置不同，这无法工作。这似乎不是一个解决办法。
1.使用汇总插件https://github.com/Ephem/rollup-plugin-preserve-directives和preserveModules: true,。虽然这适用于纯Rollup，但如果我使用Vite.js捆绑组件，“use client”指令仍然会以某种方式从其捆绑文件中删除（没有使用缩小）。
如果能够在Vite中捆绑RSC库，而不需要深入研究Rollup配置，那就太好了。
你认为最好的解决方案是什么？在Webpack、Parcel或其他捆绑包中是否有其他替代方案？
我读过一些关于这个主题的资料：
1条答案
按热度按时间rur96b6h1#
你可以使用Next.js和TurboRepo来创建你的库。看看我以前发布的这个库-https://github.com/mayank1513/sticky-section-header。使用这种方法，您可以根据需要在每个组件的基础上定义'useclient'指令。
更新：虽然我没有足够的时间对绝对路径做太多的研究，但以下是一些可能有用的资源。