如何在JavaScript中实现类似C语言#define的条件导入功能？

你遇到的报错是因为ES模块标准规定import声明必须放在模块的顶层作用域，不能嵌套在条件语句、函数等代码块内。要实现类似C语言#define的条件模块替换，有以下几种可行方案：

1. 动态import()函数（运行时条件加载） #

ES2020引入的动态import()是一个函数，返回Promise，可在任意代码位置使用，适合运行时判断环境：

// 若在顶层使用await，需确保模块是ES模块（package.json中type设为module）
let EditTools;
if (mode === 'dev') {
  // 动态导入并获取默认导出
  EditTools = (await import('./EditToolsDevTest')).default;
} else {
  EditTools = (await import('./EditTools')).default;
}

// 若不能用顶层await，可改用Promise链式调用
if (mode === 'dev') {
  import('./EditToolsDevTest').then(module => {
    const EditTools = module.default;
    // 后续逻辑
  });
}

2. 构建工具条件编译（类似#define的静态替换） #

如果你的项目使用Webpack、Vite等构建工具，可以通过环境变量实现构建阶段的静态替换，这和C语言#define的预处理逻辑最接近——在代码编译时就确定要导入的模块，而非运行时判断：

以Webpack为例： #

1. 配置DefinePlugin注入环境变量：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 注入NODE_ENV环境变量
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

2. 代码中直接写条件导入（构建时会被替换为对应路径）：

import EditTools from process.env.NODE_ENV === 'development' 
  ? './EditToolsDevTest' 
  : './EditTools';

以Vite为例： #

Vite内置了环境变量支持，直接使用import.meta.env：

import EditTools from import.meta.env.DEV 
  ? './EditToolsDevTest' 
  : './EditTools';

构建时Vite会自动根据环境替换路径，最终打包的代码只会包含对应环境的模块。

3. Node.js环境使用require（CommonJS模块） #

如果你的项目使用CommonJS模块（Node.js默认），可以直接用require()函数实现条件加载，因为require是运行时执行的函数：

let EditTools;
if (mode === 'dev') {
  EditTools = require('./EditToolsDevTest').default;
} else {
  EditTools = require('./EditTools').default;
}

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