React与JavaScript：如何通过循环批量导出函数（无需重构现有导入代码）

嘿，这个问题我太熟了——不想重构一堆现有导入代码，又想动态生成那些重复的setter函数，完全有办法搞定！

首先得说清楚：ES模块的export语句本身是静态的，没法直接在循环里写export const。但我们可以绕开这个限制，利用模块导出对象的动态特性，让现有导入代码完全不用改。

最优解决方案（兼容Node.js/打包工具） #

如果你的项目是用Node.js，或者用Webpack、Vite这类打包工具构建的，直接操作module.exports就能实现动态导出，和原来的导出效果完全一致：

// 先定义你的基础依赖和常量
const setStore = (key, value) => { /* 这里是你的setStore实现 */ };
const SOMETHING_CONSTANT = 'something_key';
const SOMETHING_CONSTANT_1 = 'something_key_1';
const SOMETHING_CONSTANT_2 = 'something_key_2';

// 维护你的setter配置数组
const setters = [
  ['setSomething', SOMETHING_CONSTANT],
  ['setSomething1', SOMETHING_CONSTANT_1],
  ['setSomething2', SOMETHING_CONSTANT_2],
];

// 循环生成并导出所有setter函数
setters.forEach(([funcName, constant]) => {
  module.exports[funcName] = (value) => setStore(constant, value);
});

这样一来，其他文件里原来的导入代码：

import { setSomething, setSomething1 } from './your-module.js';

完全不需要修改，和之前用export const定义的函数一模一样！

纯浏览器ES模块的替代方案（无打包工具） #

如果是纯浏览器环境的ES模块（没用到打包工具），静态导出的限制确实没法直接循环导出单个函数。这时候可以退而求其次，导出一个包含所有setter的对象，然后在导入时解构：

// 你的模块文件
const setters = [
  ['setSomething', SOMETHING_CONSTANT],
  // ...其他配置
];

const setterExports = {};
setters.forEach(([name, constant]) => {
  setterExports[name] = val => setStore(constant, val);
});

export default setterExports;

导入时稍微改一下：

import setterExports from './your-module.js';
const { setSomething, setSomething1 } = setterExports;

不过这需要修改导入代码，如果你不想动现有代码，还是推荐用打包工具的方案。

TypeScript适配提示 #

如果用TypeScript，记得给导出的函数加上类型定义，避免类型报错：

// 定义setter的类型
type SetterFunc = (value: unknown) => void;
type SetterMap = Record<string, SetterFunc>;

const setters = [
  ['setSomething', SOMETHING_CONSTANT],
  ['setSomething1', SOMETHING_CONSTANT_1],
] as const;

const setterFunctions = {} as {
  [K in typeof setters[number][0]]: SetterFunc;
};

setters.forEach(([funcName, constant]) => {
  setterFunctions[funcName] = (value) => setStore(constant, value);
});

module.exports = setterFunctions;

这样TypeScript就能正确推断每个导出函数的类型了。

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