浅谈package.json中main、module、browser字段对webpack的重大影响

前言

目前三种规范 esm 、cjs 、umd 占据主流，其中：

• esm ：现代 ECMA 规范，摇树性能好，首推使用

• cjs ：node 使用的 require 规范，无摇树

• umd ：支持 cjs 和 amd 规范，自动挂载导出到 global ，一般用在浏览器中

一般情况下他们在 package.json 中的对应字段如下：

字段	规范
main	cjs
module	esm
browser	umd

这里最大的问题在于：

对于一个库来说 cjs 和 umd 是需要连带第三方依赖一同打包的，因为很多配置都会默认排除 node_modules （ 比如 babel ），导致库得不到 polyfill ，特别是 webpack 5 已经去除了自动添加 polyfill 的特性后，对 cjs和 umd 的包更要格外注意，如果依赖中含有 es6 语法，最后得到的产物可能仍未被转换。

这个问题告诉我们 cjs 和 umd 以后必须要连同 polyfill 和第三方依赖一同打进来，这样才能保证兼容，也就是说丢失了摇树性能，整个库要用其中一个函数就需要都引入。

对 webpack 的影响

但 webpack 的 Resolve 机制会默认优先识别 browser 也就是 umd 规范，这就使得你只要使用了该库任何功能都会被整个库打包进来（ 配置字段 resolve.aliasFields ），当无 browser 字段时优先使用 module 字段（支持摇树）。

总结

所以毫无疑问，在用户不知情的情况下，永远都不要使用 browser 字段，永远使用 module 字段支持摇树，如果必须支持 umd ，可以添加至 umd:main 字段（ 详见 Specifying builds in package.json）。