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

前言

目前三种规范 esmcjsumd 占据主流,其中:

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

  • cjs :node 使用的 require 规范,无摇树

  • umd :支持 cjsamd 规范,自动挂载导出到 global ,一般用在浏览器中

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

字段 规范
main cjs
module esm
browser umd

这里最大的问题在于:

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

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

对 webpack 的影响

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

总结

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

你可能感兴趣的:(Web,babel,webpack,js,es6,package.json)