如何将多TS文件常量统一导出至index.ts并封装为嵌套对象？

最快实现方案：静态导出（零依赖、无运行时开销） #

这种方式实现最简单，不需要依赖任何构建工具特性，编译阶段就能获得完整的类型提示，是绝大多数场景下的最优选择。

步骤1：调整src目录下的常量文件，导出聚合对象 #

src/contact.ts

const first = [];
const second = [];
const third = [];

// 导出聚合后的对象
export default { first, second, third };

src/location.ts

const first = '';
const second = '';
const third = '';

// 导出聚合后的对象
export default { first, second, third };

步骤2：修改根目录index.ts，组装常量对象后导出 #

import contact from './src/contact';
import location from './src/location';

export const constants = {
  contact,
  location
};

灵活扩展方案：动态批量导出 #

如果后续会持续在src下新增常量文件，不想每次新增都修改index.ts，可以用构建工具的批量导入能力实现自动导出。

Vite 环境实现 #

// 批量导入src下所有ts文件，eager设为true表示立即加载所有模块
const modules = import.meta.glob('./src/*.ts', { eager: true });
const constantsMap = {};

Object.keys(modules).forEach(filePath => {
  // 提取文件名作为常量分组的key，比如./src/contact.ts提取为contact
  const moduleName = filePath.match(/\/src\/(\w+)\.ts$/)[1];
  constantsMap[moduleName] = modules[filePath].default;
});

export const constants = constantsMap;

Webpack 环境实现 #

// 批量导入src目录下所有ts文件，不遍历子目录
const requireContext = require.context('./src', false, /\.ts$/);
const constantsMap = {};

requireContext.keys().forEach(filePath => {
  // 提取文件名作为常量分组的key
  const moduleName = filePath.replace(/^\.\/(\w+)\.ts$/, '$1');
  constantsMap[moduleName] = requireContext(filePath).default;
});

export const constants = constantsMap;

注意：使用动态导出方案时，需要保证src目录下仅存放常量定义文件，避免无关文件被误导入。

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