eli*_*rej 5 rollup reactjs next.js vite
我致力于开发一个 React 组件库，该库将在各种 Next.js 项目中使用。我希望这个库中的组件以 RSC 方式编写，这意味着基础将是服务器组件，只有某些节点在其顶部有“使用客户端”指令，以提供交互性。
目前，我在按照我想要的方式捆绑此类库时遇到问题。
我使用 Vite.js 来制作捆绑包，并且由于 Vite 是在 Rollup 之上构建的，因此有 Rollup 解决方案（https://github.com/stroph/rollup-plugin-banner2）在其之上添加“use client”指令整个包，将其中的所有组件标记为“客户端”组件。
这确实使组件变得可用，但另一方面却放弃了 React Server Components 的所有优点。
这种“全有或全无”的解决方案对我来说似乎不太好。
到目前为止我已经尝试过：
分发库源代码而不是其捆绑包并transpilePackages: ['ui-library'],在 next.config.js 中使用。由于我的 next.js 应用程序和 UI 库包中的打字稿绝对路径设置不同，这不起作用。这似乎不是一个解决方案。
使用 Rollup 插件https://github.com/Ephem/rollup-plugin-preserve-directives和preserveModules: true,. 虽然这适用于纯 Rollup，但如果我使用 Vite.js 捆绑组件，“使用客户端”指令仍然会以某种方式从其捆绑文件中删除（不使用缩小）。
如果能够在 Vite 中捆绑 RSC 库，而无需深入研究 Rollup 配置，那就太好了。
您认为首选的解决方案是什么？其他捆绑器（如 Webpack、Parcel 或其他）是否有替代方案？
我读过有关该主题的一些资料来源：
您可以将 Next.js 与 TurboRepo 结合使用来创建您的库。查看我之前发布的这个库 - https://github.com/mayank1513/sticky-section-header。通过这种方法，您可以根据需要在每个组件的基础上定义“use client”指令。
更新：虽然我没有足够的时间对绝对路径进行大量研究，但以下是一些可能有用的资源。
| 归档时间： |
|
| 查看次数： |
1660 次 |
| 最近记录： |