如何将package.json的browser字段转为ESM的exports字段以屏蔽Node.js模块？

DevOps 小满

2026-6-12

解决方案

可以通过exports字段的条件导出实现浏览器环境下屏蔽指定模块的效果，无需回退到CJS规范。修改后的package.json配置如下：

{
  "name": "mypackage",
  "version": "1.0.0",
  "type": "module",
  "exports": {
    // 包主入口的环境区分
    ".": {
      "node": "./dist/localFile.js",
      "default": "./esm/localFile.js"
    },
    // 屏蔽dist下的文件在浏览器环境的加载
    "./dist/localFile.js": {
      "browser": false,
      "default": "./dist/localFile.js"
    },
    // 屏蔽esm下的文件在浏览器环境的加载
    "./esm/localFile.js": {
      "browser": false,
      "default": "./esm/localFile.js"
    }
  }
}

配置说明

移除了原有的main和module字段，exports字段会覆盖这两个字段的解析优先级，是ESM规范下更标准的入口定义方式。
主入口（.）通过node条件指定Node.js环境使用原main路径，default条件兜底适配其他环境（包括浏览器）使用原module路径。
针对需要屏蔽的两个文件路径，通过browser条件指定在浏览器环境下导出false，等同于原browser字段的效果——浏览器打包工具（如Webpack、Rollup）会忽略该模块的加载；default条件保证Node.js等其他环境正常加载原文件。