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

Question

我刚刚将我的第一个包(一个 react 组件)发布到 npm，但我在理解 lib 目录与 dist 目录之间的区别时遇到了一些麻烦。

目前我同时生成 lib 和 dist 但是我的包“main”指向使用 webpack 构建的 dist 未压缩的 js 文件并输出为 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)？

Answer 1

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

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