如何在NodeJS环境替换ESM导入文件 实现浏览器与NodeJS跨环境兼容

你之前配置的exports字段仅作用于外部包导入当前包的路径映射，无法覆盖包内部的相对导入规则，所以配置不生效。

你可以用Node原生支持的imports字段搭配条件导入实现需求，不需要运行时判断，兼容性远高于top level await：

方案1：直接映射依赖（不需要多写工具文件） #

1. 改写utilities.js的导入逻辑，使用自定义裸导入符：

// ./utilities.js
import { WritableStream } from '#streams'
export { WritableStream }

2. 在package.json中添加imports配置，按环境映射依赖：

{
  "imports": {
    "#streams": {
      "browser": "https://cdn.jsdelivr.net/npm/web-streams-polyfill@3/dist/ponyfill.es2018.mjs",
      "node": "web-streams-polyfill"
    }
  }
}

Node环境下会自动加载npm包web-streams-polyfill，浏览器侧则直接加载CDN资源，完全符合Web优先的实现思路。

方案2：按环境切换工具文件 #

如果你希望保留两份工具文件的分离设计，直接按环境映射文件路径即可：

{
  "imports": {
    "./src/utilities.js": {
      "browser": "./src/utilities.js",
      "node": "./src/node-utilities.js"
    }
  }
}

此时你在业务代码中直接import { WritableStream } from './src/utilities.js'，Node会自动匹配到node-utilities.js的实现，不会触发HTTP导入的报错。

注：该特性在Node.js 14.13.0及以上版本原生支持，主流前端打包工具（Rollup、Vite、Webpack 5+）也全部兼容该配置，不需要额外插件适配。

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