我刚刚向npm发布了我的第一个包（一个反应组件），但是我很难理解lib目录与dist之间的区别。
目前我生成了lib和dist但是我的包“main”指向使用webpack构建并输出为UMD的dist未经明确的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生成我的{{1文件夹看到lib文件/导入引用需要转换为scss？
你是想要同时拥有lib和dist，还是想要拥有与lib文件夹相同目的的UMD版本？
如果您应该同时拥有这两个方法，因为在js文件中使用CSS模块并且仍然保持与src相同的文件夹结构时，我无法找到有关生成lib文件夹的任何信息（虽然仍然产生dist）？
答案 0 :(得分：21)
通常dist文件夹用于发送UMD，如果用户未使用包管理，则可以使用该文件夹。 lib文件夹是package.json main指向的文件夹，使用npm安装软件包的用户将直接使用该文件夹。使用lib而不是src的唯一用途是使用babel和webpack将您的源转换为更一般的兼容性，因为大多数构建过程不会在{{1}中的包上运行babel变换}。
就处理样式导入而言，在导出的源js中不导入scss或css文件可能是个好主意。这是因为默认情况下节点无法导入类似的样式。如果您有一个演示组件的示例，那么在那里导入样式是有意义的。常见的模式是在node_modules文件夹中发布缩小和未缩小的css，并在文档中告诉使用者使用他们喜欢的任何技术显式导入css文件。如果你需要一个例子，我用redux bug reporter采用这种方法。希望有所帮助！
答案 1 :(得分：2)
好吧我想我发现了怎么做。有一个babel插件，允许您在运行babel时使用webpack加载器（babel-plugin-webpack-loaders）。因此，我的CSS映射在js文件中内联，并且使用的映射哈希值也与构建dist时使用的相同。耶！
答案 2 :(得分：0)
通常dist指的是包中包含的库，另一方面{{1}}是项目的分发文件。作为一个例子，你可以编写一堆javascript并包含jquery（这是一个lib），然后当它们全部捆绑在一起时你就会有一个dist文件。