ES6语法下如何用变量键实现命名导出及批量导出对象成员

嘿，我来帮你搞定这两个导出的问题～

1. ES6语法中如何使用变量键实现命名导出？ #

首先得明确：ES6模块的静态导出机制要求导出名称必须在编译时就能确定，所以没法直接用变量键（动态名称）来定义export const xxx = ...这种静态命名导出。不过有两种思路可以实现类似需求：

• 思路1：导出一个包含动态键的对象，让导入方解构
  如果你只是需要让导入方用类似命名导出的方式获取值，可以先把变量键和对应值放到一个对象里，默认导出这个对象，导入时解构即可：

  // 导出模块
  const dynamicKey = 'myCustomFunction';
  const myFunc = () => console.log('Hello!');
  export default { [dynamicKey]: myFunc };
  
  // 导入模块
  import exportsObj from './myModule.js';
  const { myCustomFunction } = exportsObj;
  myCustomFunction(); // 输出 Hello!
  

• 思路2：用CommonJS的动态导出（如果环境允许）
  如果你在CommonJS环境（比如项目没设置"type": "module"），可以直接用module.exports来实现动态键的命名导出，因为CommonJS是运行时导出的：

  const dynamicKey = 'myCustomFunction';
  const myFunc = () => console.log('Hello!');
  module.exports[dynamicKey] = myFunc;
  
  // 导入时可以直接解构
  const { myCustomFunction } = require('./myModule.js');
  

2. 将未知对象的所有成员转为命名导出 #

你的需求是把一个内容未知的对象所有成员都作为命名导出，先分析下你之前的代码问题，再给你对应解决方案：

为什么你的代码不生效？ #

你写的是CommonJS风格的代码，但如果你的React项目是ES模块环境（比如package.json里有"type": "module"），那么module.exports是不存在的，而且require也不能直接使用，这就导致导出的内容无法被ES模块系统识别。

分场景解决方案 #

场景1：项目用CommonJS（无"type": "module"）

这种情况可以简化代码，直接把对象展开赋值给module.exports即可：

const cfgEnv = require(`./${process.env.REACT_APP_ENV}`);
// 直接导出所有成员，等价于逐个命名导出
module.exports = { ...cfgEnv };

// 导入时直接解构获取需要的成员
const { apiUrl, timeout } = require('./config.js');

场景2：项目用ES模块（有"type": "module"）

因为ES模块静态导出不支持动态命名，所以推荐用动态导入+默认导出对象的方式：

// 导出模块
// 用动态import加载对应环境的配置，默认导出整个对象
export default await import(`./${process.env.REACT_APP_ENV}.js`);

// 导入模块
import config from './config.js';
const { apiUrl, timeout } = config;

如果你的构建工具（比如Webpack、Vite）支持，也可以用require.context或者类似的方式提前扫描配置文件，但对于基于环境变量动态加载的场景，上面的动态导入方式最直接。

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