javascript - 为库优化 webpack 构建

Question

我正在开发一个可以被 Node.js 和浏览器使用的库。该库是用 typescript 编写的。

这个库有一个浏览器构建，使用 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 字段指向针对节点使用的字段，但您也可以指定 browser webpack 将用于浏览器环境入口点的字段。如果您的库没有太多依赖项，只需自己将其捆绑到 web 并在 browser 字段中指定该输出文件