我正在开发一个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中引用它以供脚本标记使用?