JavaScript中如何根据环境切换选择不同的import语句变体？

原生ES Module不支持C语言风格的#define/#if预处理器宏，浏览器和Node都无法直接识别这类语法。要实现环境切换时不用逐个修改所有文件的导入路径，以下是几个可直接落地的方案：

方案1：构建工具配置路径别名（优先推荐，适合绝大多数前端项目） #

不管你用Vite、Webpack还是Rollup，都原生支持按环境配置路径别名。你只需要在构建配置文件里写一次路径映射规则，所有业务文件里的导入语句都用固定别名，启动本地服务、打生产包时工具会自动替换成对应环境的真实路径，全程不用碰业务代码。
以Vite配置为例，在项目根目录的vite.config.js中添加如下配置：

import { defineConfig } from 'vite'
// 自动识别环境，本地开发时NODE_ENV默认为development，生产构建时为production
const isLocalEnv = process.env.NODE_ENV === 'development'

export default defineConfig({
  resolve: {
    alias: {
      'three': isLocalEnv ? '../three.js' : 'https://cdn.skypack.dev/three@0.133.1/build/three.module.js',
      'three/gui': isLocalEnv ? '../three.js/examples/jsm/libs/dat.gui.module' : 'https://cdn.skypack.dev/three@0.138.1/examples/jsm/libs/lil-gui.module.min.js',
      'three/tween': isLocalEnv ? '../three.js/examples/jsm/libs/lil-gui.module.min.js' : 'https://cdn.skypack.dev/three@0.133.1/examples/jsm/libs/tween.module.min',
      'three/buffer-geom-utils': isLocalEnv ? '../three.js/examples/jsm/utils/BufferGeometryUtils.js' : 'https://cdn.skypack.dev/three@0.133.1/examples/jsm/utils/BufferGeometryUtils.js'
    }
  }
})

配置完成后，所有业务文件里的导入都统一写固定格式，切换环境时不需要做任何修改：

import * as THREE from 'three'
import { GUI } from 'three/gui'
import { TWEEN } from 'three/tween'
import * as BufferGeometryUtils from 'three/buffer-geom-utils'

方案2：无构建工具的纯原生项目，抽离统一依赖代理模块 #

如果你的项目没有接入任何构建工具，就是直接在浏览器跑原生ES模块，可以单独抽一个全局依赖入口文件（比如命名为deps.js），在这个文件里统一做环境判断和依赖导入，其他所有业务文件都只从这个入口文件拿依赖，后续切换环境只需要改这一个文件即可。
deps.js参考写法：

// 环境判断规则：本地开发一般用localhost/127.0.0.1访问，线上环境用正式域名
const isLocal = ['localhost', '127.0.0.1'].includes(location.hostname)

let THREE, GUI, TWEEN, BufferGeometryUtils
if (isLocal) {
  ({ default: THREE } = await import('../three.js'))
  ({ GUI } = await import('../three.js/examples/jsm/libs/dat.gui.module'))
  ({ TWEEN } = await import('../three.js/examples/jsm/libs/lil-gui.module.min.js'))
  ({ default: BufferGeometryUtils } = await import('../three.js/examples/jsm/utils/BufferGeometryUtils.js'))
} else {
  ({ default: THREE } = await import('https://cdn.skypack.dev/three@0.133.1/build/three.module.js'))
  ({ GUI } = await import('https://cdn.skypack.dev/three@0.138.1/examples/jsm/libs/lil-gui.module.min.js'))
  ({ TWEEN } = await import('https://cdn.skypack.dev/three@0.133.1/examples/jsm/libs/tween.module.min'))
  ({ default: BufferGeometryUtils } = await import('https://cdn.skypack.dev/three@0.133.1/examples/jsm/utils/BufferGeometryUtils.js'))
}

export { THREE, GUI, TWEEN, BufferGeometryUtils }

业务文件中统一从该模块导入依赖即可：

import { THREE, GUI, TWEEN, BufferGeometryUtils } from './deps.js'

方案3：保留C风格预处理器语法 #

如果你一定要用#define/#if这类宏写法，可以在构建流程中接入预编译处理插件，在代码打包前先根据环境变量裁剪、替换对应代码块。但这类方案灵活性差，维护成本高，一般不推荐使用。

注意：顶层import语句是静态编译的，不支持直接在语句里写条件判断或者动态拼接路径，动态import()是异步API，不适合直接散落在各个业务文件里写，统一放在代理模块中处理是更稳妥的做法。

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