如何在 ES 模块中根据环境变量动态导入不同模块-js教程-PHP中文网

如何在 ES 模块中根据环境变量动态导入不同模块

es 模块不支持运行时条件导入，但可通过预加载 + 条件赋值方式实现环境感知的默认导出，适用于开发/生产环境配置分离场景。

es 模块不支持运行时条件导入，但可通过预加载 + 条件赋值方式实现环境感知的默认导出，适用于开发/生产环境配置分离场景。

在 ES 模块（ESM）中，`import` 语句必须是**顶层静态声明**，不能出现在 `if`、函数或任何运行时逻辑中。因此，无法像 CommonJS 的 `require()` 那样直接在条件分支中动态加载模块。但我们可以采用“先全部导入，再按需选择”的策略，安全、清晰且完全符合 ESM 规范。

✅ 推荐实现方式：预导入 + 条件赋值

// config/index.js
import Production from './prod.js';
import Development from './dev.js';

const defaultExport =
  process.env.NODE_ENV === 'production' ? Production : Development;

export default defaultExport;

? 注意：确保 ./prod.js 和 ./dev.js 文件存在且导出结构一致（例如都默认导出一个对象或函数），否则运行时可能因属性缺失而报错。

⚠️ 常见误区与注意事项

不可使用 import() 动态导入替代？
虽然 import('./prod.js') 是合法的动态导入语法，但它返回的是 Promise，无法在同步模块顶层直接 await，也不适用于 export default（导出必须是同步值）。因此，不适用于构建时即确定的环境分支逻辑。
环境变量需在构建阶段注入
Node.js 中 process.env.NODE_ENV 在运行时才可读取。若使用打包工具（如 Vite、Webpack、esbuild），建议通过插件或 define 替换，在构建时将 process.env.NODE_ENV 内联为字面量（如 'production'），既提升性能，又避免未定义风险。

类型安全提示（TypeScript 用户）
若启用 TypeScript，可为两个模块定义统一接口，确保类型一致性：

// types/config.ts
export interface Config {
  apiUrl: string;
  enableLogging: boolean;
}

// prod.ts & dev.ts 均需满足 Config 接口

✅ 最佳实践总结

✅ 保持导入语句静态、明确、可静态分析；
✅ 使用三元运算符或 if/else 对已导入值进行逻辑分发；
✅ 在入口或配置层统一处理环境分支，避免业务文件中重复判断；
✅ 结合构建工具做环境常量替换，增强可靠性与 Tree-shaking 效果。

该方案兼顾标准兼容性、可维护性与工程健壮性，是当前 ESM 环境下实现条件导出的推荐模式。