使用 webpack 打包库时 lib 和 dist 文件夹之间的区别？

Posted 2023-02-22

【中文标题】使用 webpack 打包库时 lib 和 dist 文件夹之间的区别？

【英文标题】：Difference between lib and dist folders when packaging library using webpack?

【发布时间】：2017-01-25 22:58:31

【问题描述】：

我刚刚将我的第一个包（一个反应组件）发布到 npm，但我无法理解 lib 目录与 dist 之间的区别。

目前我同时生成lib 和dist，但是我的包“main”指向dist 未缩小的js 文件，该文件是使用webpack 构建的并输出为UMD。 lib 文件夹是使用babel 构建的，采用src 并输出到lib。

dist 文件夹包含 [unminified/minified].js 文件以及 [unminified/minified].css 文件。

我的主要困惑在于 lib 文件夹，因为从那里导入目前无法正常工作，因为我只是转换 src -> lib，这意味着 scss 引用仍然存在并且 scss 文件也没有转换。

我使用 CSS 模块（css-loader、styles-loader、postcss-loader 等）来生成我的 CSS 文件，这就是混乱的地方，难道我还需要使用 webpack 来生成我的lib看到scss文件/导入引用的文件夹需要转换为css？

您是打算同时拥有 lib 和 dist 还是在 dist 中构建 UMD 与拥有 lib 文件夹的目的相同？

如果你应该同时拥有这两者，我将如何实现这一点，因为我找不到任何关于在你的 js 文件中使用 CSS 模块时生成 lib 文件夹的信息，并且仍然保持与 src 相同的文件夹结构（同时仍在生成 dist)？

【参考方案1】：

通常dist 文件夹用于运送用户在不使用包管理时可以使用的 UMD。 lib 文件夹是 package.json main 指向的文件夹，使用 npm 安装包的用户将直接使用该文件夹。与src 相比，lib 的唯一用途是使用 babel 和 webpack 转换您的源代码以使其更普遍兼容，因为大多数构建过程不会在 node_modules 中的包上运行 babel 转换。

就处理样式导入而言，最好不要在导出的源 js 中导入 scss 或 css 文件。这是因为 node 默认不能导入这样的样式。如果您有一个演示组件的示例，那么在此处导入样式是有意义的。常见的模式是在 dist 文件夹中发布缩小和未缩小的 css，并在您的文档中告诉消费者使用他们喜欢的任何技术显式导入 css 文件。如果您需要示例，我使用redux bug reporter 采用这种方法。希望对您有所帮助！

【讨论】：

好的，谢谢，我现在更好地理解了其中的区别。但是，这是我刚刚发布的小库github.com/deep-c/react-redux-notify，正如您所见，我将 classNames 绑定到我从其关联的 scss 样式表导入的组件，该样式表通过 css-loader、style-loader、sass-loader 进行转换，然后添加到我的组件默认道具。

我很感激一个不需要我无数次查找UMD 的答案；）。

【参考方案2】：

好吧，我想我知道如何做到这一点了。有一个 babel 插件可以让你在运行 babel (babel-plugin-webpack-loaders) 时使用 webpack loader。因此，我的 CSS 映射被内联在 js 文件中，并且使用的映射哈希也与构建 dist 时使用的相同。耶！

【参考方案3】：

一般lib 是指包含在包中的库，而dist 则是您项目的分发文件。例如，您可以编写一堆 javascript 并包含 jquery（这是一个库），然后当它们全部捆绑在一起时，您就有一个 dist 文件。