为什么仅支持CommonJS的ua-parser-js可使用ES module import语法导入

ua-parser-js本身仅实现了CommonJS规范的导出逻辑，没有显式写ES模块的export声明，你看到的import { UAParser } from 'ua-parser-js'语法可以正常工作，核心是构建工具/运行时的CommonJS与ES模块互操作兼容机制，具体原因如下：

• 首先看它本身的CommonJS导出逻辑：
  给出的导出代码实际做了两层赋值：

  // 1. 把module.exports整体赋值为UAParser构造函数本身
  exports = module.exports = UAParser;
  // 2. 给导出的UAParser函数对象额外挂载了UAParser属性，值指向自身
  exports.UAParser = UAParser;
  

  也就是说用CommonJS的require('ua-parser-js')拿到的返回值，既是UAParser构造函数本身，也可以通过.UAParser属性再获取一次这个构造函数。
• 其次是ES模块导入的兼容处理规则：
  不管是Webpack、Vite、Babel、TypeScript这类前端构建工具，还是Node.js的ESM运行时，处理ES模块导入CommonJS模块的场景时，都会做兼容转换：
  1. 会默认把CommonJS的module.exports整体作为ES模块的default默认导出，你可以用import UAParser from 'ua-parser-js'直接拿到构造函数
  2. 绝大多数前端构建工具会额外做命名导出推断：自动把CommonJS导出对象上的所有可枚举属性，转换为对应的ES模块命名导出。刚好ua-parser-js的导出对象上有UAParser这个属性，因此import { UAParser }的命名导入语法就可以正常匹配到对应的值。

如果是纯原生Node.js ESM环境（没有任何构建工具转译），默认仅支持默认导入，要使用命名导入需要搭配@babel/node、ts-node这类做了兼容处理的运行时工具。

内容的提问来源于stack exchange，提问作者desertpureolive