typescript - 如何将 Next.js 中的共享组件提取到 npm 模块中？

Question

我有一个 Next.js 应用程序，它不仅有页面，还有一些组件。这些组件是用 TypeScript 编写的（所以我们实际上是在.tsx这里讨论），它们使用CSS 模块，使用 Next.js 的*.module.css模式——或者更准确地说，它们使用CSS 模块和 Next.js 的 SASS 支持，所以我们'在这里再谈*.module.sass。到目前为止，一切正常。

现在我想创建第二个 Next.js 应用程序，我需要两个应用程序中的一些组件。当然，我可以复制/粘贴它们，但由于显而易见的原因，这是一个坏主意。我想做的是将共享组件提取到它们自己的 npm 模块中，并在两个应用程序中使用它。现在这是棘手的部分。

我不想预编译共享代码，以允许各自的 Next.js 应用程序对应用程序代码和UI 库代码进行编译，但我不知道如何完成。当然，设置一个只包含普通文件*.tsx和*.module.sass文件的 npm 模块很容易，但是如何让最终的 Next.js 应用程序也编译它们呢？

AFAICS Next.js 仅编译包含在应用程序本身中的组件和样式，而不是那些在通过 npm 安装的模块中定义的组件和样式。有什么办法可以启用它吗？

PS：我知道next-transpile-modules模块，但如果有的话，我更喜欢更“官方”的方法......</p>

标签： typescriptnpmsassnext.jscss-modules