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

我刚刚发布了我的第一个软件包（反应组件）到npm，但是我在理解lib目录与dist的比较之间的区别时遇到了一些麻烦。使用webpack打包库时，lib和dist文件夹之间的区别？

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

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

我的主要困惑是与lib文件夹，因为从那里进口目前不会工作看到我只是变换意思是scss引用仍然存在，并且scss文件也不转换。

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

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

如果您应该同时拥有这个功能，因为在js文件中使用CSS模块时仍然无法找到关于生成lib文件夹的任何信息，并仍然保持与src相同的文件夹结构（同时还会产生dist）？

来源

2016-09-18 Deep

通常，dist文件夹用于装运UMD，用户可以在未使用包管理的情况下使用该UMD。 lib文件夹是package.jsonmain指向的内容，而使用npm安装包的用户将直接使用该文件夹。 lib而不是src的唯一用途是使用babel和webpack将源代码转换为更一般的兼容，因为大多数构建过程不会在node_modules的包中运行包变换。

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

来源

2016-09-18 05:48:36

好酷谢谢你，我现在更好地理解差异。然而，这是我刚刚发布的小型库https://github.com/deep-c/react-redux-notify/，正如你所看到的，我将classNames绑定到了我从它关联的scss样式表导入的组件，通过css-loader，style-loader，sass-loader然后添加到我的组件默认道具中。 – Deep

好吧，我想知道如何做到这一点。有一个babel插件，允许您在运行babel时使用webpack加载器（babel-plugin-webpack-loaders）。因此，我的CSS映射内联在js文件中，所使用的映射哈希也与构建dist时使用的哈希相同。好极了！

来源

2016-09-18 11:39:21 Deep

一般而言，lib是指包中包含的库，另一方面dist是您的项目的分发文件。作为一个例子，你可以写一堆javascript并包含jquery（这是一个lib），然后当它们都捆绑在一起时，你只有一个dist文件。

来源

2016-09-19 14:34:41

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

回答

相关问题