是否有可能使webpack从包中消费React组件并重新构建包?

Question

我正在尝试构建一个npm包来标准化我的布局组件，这些组件的核心使用geist组件。一开始，我试图像使用本地组件一样使用npm包，但当它试图读取该组件时，会抛出webpack加载器错误，例如:

Module parse failed: Unexpected token (6:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Badged = ({ content }) => {
|     return (
>         <Badge>
|             <b>{content}</b>
|         </Badge>

在阅读了一些之后，似乎我需要webpack或rollup之类的东西来构建我的npm包中的一个dist文件夹。如何设置管道来使用源包中的类型数据并将组件构建到dist文件夹?

Answer 1

根据经验，Webpack被用作应用程序捆绑器，而Rollup被用作库捆绑器。这样做的原因是，从历史上看，Rollup可以产生可摇树的ESM模块输出。Webpack最近添加了ESM输出支持。

库开发的一般步骤是:

• 设置一个像Rollup这样的打包器
• 配置它在dist文件夹中同时生成ESM和Common.js输出。
• 发布包时，确保dist被添加到files列表中，或者至少没有被添加到npmignore列表中。
• 总是发布编译的代码。main或entry字段应该指向编译后的代码的入口文件。
• 当发布一个库时，使用externals从你的包中排除所有第三方的node_modules，这样它们就被显式地安装在用户端，你的库只包含你的代码。几乎所有的打包器都支持这个特性。