优化库的 webpack 构建答案

【问题标题】：Optimizing webpack builds for libraries优化库的 webpack 构建
【发布时间】：2019-09-11 14:27:58
【问题描述】：

我正在开发一个可供 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 的基于浏览器的较小版本的依赖项？

【问题讨论】：

不是您要求的（对此感到抱歉），而是在您的情况下我会做什么： - 检测运行时环境 - 基于运行时环境抛出异常或记录警告（取决于如果使用了错误的版本，您希望有多严格。例如，如果在生产中使用非生产反应构建，则反应日志警告。

标签： javascript typescript webpack

【解决方案1】：

您可以像往常一样将package.json 中的main 字段指向针对节点使用的字段，但您也可以指定webpack 将用于浏览器环境入口点的browser 字段。如果您的库没有太多依赖项，只需将其捆绑到 Web 并在 browser 字段中指定该输出文件

【讨论】：