Question

我正在开发一个JavaScript库，并在package.json中设置了“浏览器”，“模块”和“主要”字段，每个字段都有不同的入口点。

// package.json
"main": "./dist/umd/index.js",
"browser": "./dist/browser/index.js",
"module": "./dist/esm/index.js",
...

在浏览器包中，该库作为全局函数公开给窗口，因此可以与脚本标签一起使用，例如：

const x = 42;
const msg = match(x)
  .caseLessThan(0, "Negative values not allowed")
  .default(_ => `${_} items selected`);
           
alert(msg);

<script src="https://unpkg.com/x-match-expression/dist/browser/index.js"></script>

问题是，当尝试通过webpack在另一个项目中使用该库时，默认情况下会使用“浏览器”入口点，并且该函数未正确解析，从而在运行时出现未定义的错误。

import {match} from "x-match-expression";
const x = 42;
const msg = match(x) // <--- match is undefined at runtime with default webpack settings
  .caseLessThan(0, "Negative values not allowed")
  .default(_ => `${_} items selected`);

我知道可以通过设置resolve.mainFields在webpack中设置resolve字段，但这对于我的库用户来说是违反直觉的，因此我不得不删除package.json中的“浏览器”入口点，但是我不知道是否有没有更好的方法。

我应该在package.json中使用“浏览器”字段吗？还是我应该只提供浏览器捆绑软件，而不必在package.json中引用它以供脚本标记使用？

编写将函数导出到全局对象的库时，是否应该在package.json中使用浏览器字段？

0 个答案: