时间戳

首页 > 解决方案 > 优化库的 webpack 构建

javascript - 优化库的 webpack 构建

问题描述

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

标签： javascripttypescriptwebpack

解决方案

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

推荐阅读