使用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文件夾之間的區別？

回答

相關問題