如何在ES Modules中根据环境条件实现条件式模块导入？

原CommonJS参考代码：

if (process.env.NODE_ENV === "production") {
  module.exports = require('./prod')
} else {
  module.exports = require('./dev')
}

以下是几种用ES Modules (import/export)实现相同功能的方案：

方式一：顶层await动态导入（推荐，现代环境适用） #

ES Modules支持顶层await（Node.js 14.8+、现代浏览器），可以直接在模块顶层根据环境判断并导入对应配置：

若prod/dev是默认导出 #

let config;
if (process.env.NODE_ENV === "production") {
  const prodModule = await import('./prod.js');
  config = prodModule.default;
} else {
  const devModule = await import('./dev.js');
  config = devModule.default;
}

export default config;

若prod/dev是命名导出 #

let config;
if (process.env.NODE_ENV === "production") {
  const { prodConfig } = await import('./prod.js');
  config = prodConfig;
} else {
  const { devConfig } = await import('./dev.js');
  config = devConfig;
}

export default config;

方式二：异步函数封装（兼容老环境） #

如果环境不支持顶层await，可以把配置导出封装成异步函数，调用方通过await获取：

export async function getConfig() {
  if (process.env.NODE_ENV === "production") {
    const { default: prodConfig } = await import('./prod.js');
    return prodConfig;
  } else {
    const { default: devConfig } = await import('./dev.js');
    return devConfig;
  }
}

调用示例：

import { getConfig } from './config.js';

const config = await getConfig();
// 使用config进行后续操作

方式三：Node.js静态条件导出（打包友好） #

如果是Node.js环境，还可以通过package.json的exports字段实现静态条件导出，无需运行时判断，打包工具（如Webpack、Rollup）能更好地做树摇优化：

在项目根目录的package.json中添加：

{
  "exports": {
    ".": {
      "production": "./prod.js",
      "development": "./dev.js",
      "default": "./dev.js"
    }
  }
}

之后直接导入即可，Node.js会自动根据NODE_ENV选择对应模块：

import config from './config.js';

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