使用webpack打包库时，lib文件夹和dist文件夹有什么区别？

Question

我刚刚在npm上发布了我的第一个包（一个React组件），但我还不太明白`lib`目录和`dist`目录之间的区别。

目前我同时生成了`lib`和`dist`目录，但我的包的“main”指向了使用webpack构建并输出为UMD格式的未压缩js文件的`dist`目录。`lib`目录是使用`babel`从`src`构建而来的。

`dist`目录包含了未压缩/压缩的`.js`和`.css`文件。

我对`lib`目录感到困惑，因为从那里导入的内容目前无法工作，因为我只是将`src -> lib`进行了转换，这意味着`scss`引用仍然存在，并且`scss`文件也没有被转换。

我使用CSS Modules（css-loader、styles-loader、postcss-loader等）来生成CSS文件，这就是混淆的原因，因为既然需要将`scss`文件/引用转换为`css`，那么难道我也不需要使用webpack来生成`lib`目录吗？ 你是否应该同时拥有`lib`和`dist`目录？或者说，在`dist`中的UMD构建是否能够完成与`lib`目录相同的任务？ 如果确实需要同时拥有`lib`和`dist`目录，我该如何做到这一点呢？因为我找不到任何关于在js文件中使用CSS模块并仍然保持与`src`相同的目录结构（同时生成`dist`）的信息。

- Deep

Answer 1

dist文件夹通常用于发布UMD格式的包，如果用户没有使用包管理工具，则可以使用该包。lib文件夹是package.json中main指向的位置，使用npm安装您的包的用户将直接使用它。使用lib而不是src的唯一用途是通过babel和webpack转换您的源代码，使其更具有通用性，因为大多数构建过程不会在node_modules中运行babel转换。

在处理样式导入时，最好不要在导出的源JS中导入scss或css文件。这是因为节点默认情况下无法导入这样的样式。如果您有一个演示组件的示例，最好在那里导入样式。常见模式是在dist文件夹中发布已压缩和未压缩的CSS，并在文档中告知用户使用他们喜欢的任何技术来显式导入CSS文件。如果需要示例，可以参考redux bug reporter。希望这有所帮助！

- Drew Schuster

---

好的，谢谢你的解释，我现在更清楚它们之间的区别了。不过，这是我刚刚发布的小型库 https://github.com/deep-c/react-redux-notify/ ，你可以看到我将classNames绑定到组件上，这些classNames是从相关的scss样式表中导入的，通过css-loader、style-loader、sass-loader进行转换，然后添加到我的组件默认属性中。 - Deep

我希望你能回答我，而不需要让我再次查找UMD的内容。 ;) - bluenote10

Answer 2

一般而言，lib指的是包含在软件包中的库，而dist则是你项目的分发文件。例如，你可以编写一堆 JavaScript 代码，并包含 jQuery（这是一个 lib），然后当它们全部打包在一起时，你就有了一个单独的 dist 文件。

- Brandon Parker

Answer 3

好的，我想我找到了如何做到这一点。有一个 Babel 插件可以在运行 Babel 时使用 webpack 加载器 (babel-plugin-webpack-loaders)。因此，我的 CSS 映射被嵌入到 js 文件中，并且使用的映射哈希与构建 dist 时使用的相同。太棒了！

- Deep