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

Question

我刚刚向npm发布了我的第一个包(一个反应组件),但我很难理解lib目录与之比较的区别dist.

目前我生成了两个lib,dist但是我的包"main"指向dist使用webpack构建并作为UMD输出的未编译的js文件.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,或者是远程的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文件导出.这是因为默认情况下节点无法导入类似的样式.如果您有一个演示组件的示例,那么在那里导入样式是有意义的.常见的模式是在dist文件夹中发布缩小和未缩小的css ,并在文档中告诉使用者使用他们喜欢的任何技术显式导入css文件.如果你需要一个例子,我在redux bug报告器中采用了这种方法.希望有所帮助!