優化庫的Webpack構建

Question

我正在開發一個可以被Node.js和瀏覽器使用的庫。 該庫使用打字稿編寫。

該庫具有使用webpack構建的瀏覽器。 使用Webpack時，多個文件將被覆蓋。 一個示例是它將使用基於瀏覽器的Base64 API，而不是使用Node.js緩沖區，從而大大減小了庫的大小。

這是我的Webpack配置的一部分，可完成以下工作：

resolve: {
  extensions: ['.web.ts', '.web.js', '.ts', '.js', '.json'],
  alias: {
    // We need an alternative 'querystring', because the default is not
    // 100% compatible
    querystring: 'querystring-browser'
  }
},

這允許的是我有以下兩個文件：

base64.js
base64.web.js

默認情況下，將使用第一個base64，但webpack將首選.web.js文件。

這很好。

我遇到的問題是，許多用戶沒有下載瀏覽器版本，而是將其手動添加到他們的腳本標簽中。 將庫作為npm依賴項包含進來是很常見的，最終用戶負責運行Webpack並創建一個更大的捆綁包。

在那種情況下，我無法控制webpack的配置，但我希望這些用戶仍然可以從這些優化中受益。 我的庫的區別非常明顯（數百kb）。

有沒有一種方法可以讓庫所包含的用戶運行Webpack依賴於使用基於瀏覽器的較小版本的API？

Answer 1

您可以像往常一樣將package.json的main字段指向一個針對節點使用的字段，但是您也可以指定webpack將用作瀏覽器環境入口點的瀏覽browser字段。 如果您的庫沒有太多依賴關系，只需將其捆綁到網絡上，然后在browser字段中指定該輸出文件