如何批量导入models文件夹中所有JS文件的默认导出值？

嘿，这个问题问得很实用！直接用import * as models from './models'是没法直接实现你想要的效果的，但有几种靠谱的办法能达成目标——让models变成一个以文件名作为键、对应文件默认导出为值的对象，下面给你拆解一下：

1. 手动创建文件夹入口文件（通用方案） #

这是最兼容所有模块系统（不管是ES Modules还是CommonJS）的方法，核心思路是给models文件夹加一个入口文件（通常命名为index.js），手动把所有模型文件的默认导出统一对外暴露：

// models/index.js
// 逐个导入并重新导出每个文件的默认值，文件名就是导出的键
export { default as User } from './User.js';
export { default as Post } from './Post.js';
export { default as Comment } from './Comment.js';
// 所有模型文件都这么写一遍

完成后，你在项目其他地方就能直接用import * as models from './models'了——此时models.User就是User.js的默认导出，models.Post就是Post.js的默认导出，完全符合你的需求。

2. 用构建工具自动收集（适合文件较多的场景） #

如果你的models文件夹里文件很多，手动写入口文件太麻烦，可以借助Webpack、Vite这类构建工具的动态导入能力自动收集所有文件的默认导出：

如果你用Vite： #

// 在需要使用models的文件里
const moduleMap = import.meta.glob('./models/*.js', { eager: true });
const models = {};

// 遍历所有导入的模块，整理成目标对象
for (const filePath in moduleMap) {
  // 从文件路径中提取文件名（比如从"./models/User.js"拿到"User"）
  const fileName = filePath.split('/').pop().replace('.js', '');
  // 把默认导出赋值给对应键
  models[fileName] = moduleMap[filePath].default;
}

如果你用Webpack： #

// 在需要使用models的文件里
const models = {};
// 创建一个上下文，自动匹配models文件夹下的所有js文件
const modelContext = require.context('./models', false, /\.js$/);

// 遍历所有匹配到的文件路径
modelContext.keys().forEach(filePath => {
  // 提取文件名
  const fileName = filePath.replace('./', '').replace('.js', '');
  // 把默认导出赋值给对应键
  models[fileName] = modelContext(filePath).default;
});

为什么直接import * as models from './models'不行？ #

ES Modules的规则里，直接导入文件夹时，只会去查找该文件夹下的index.js（或者你在文件夹的package.json里指定的main/module字段对应的文件），不会自动遍历文件夹里的所有文件。如果没有入口文件，直接导入文件夹会触发模块解析错误。

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