ES6批量导入目录模块：替代import-modules的最佳实践？

一、import-modules库是否属于最佳实践？ #

这个库是成熟的封装工具，能快速实现批量导入目录文件的需求，对于旧项目迁移或快速开发来说是可行的，但并非必须的最佳实践。它本质是封装了Node.js的文件遍历+ES动态导入逻辑，而ES6+原生API已经能实现相同功能，使用原生方案可以减少第三方依赖，更贴合ES模块规范。

二、ES6+原生特性实现方案 #

根据你的场景，分两种原生方案供选择：

1. 静态批量导入（适合文件固定的场景） #

如果onInitStart目录下的hook文件数量固定、不会频繁新增，可以在该目录下创建一个index.js统一导出所有hook：

// hooks/onInitStart/index.js
export { default as hookA } from './hookA.js';
export { default as hookB } from './hookB.js';
// 后续新增hook时，手动添加对应导出语句即可

然后在主文件中导入这个统一入口：

import * as initHooks from '../../hooks/onInitStart/index.js';

export const executeInitHooks = async () => {
  logger.info(`Executing Init hooks`);
  for (const [name, hook] of Object.entries(initHooks)) {
    try {
      logger.info(`Import ${name}`);
      await hook.run();
    } catch (err) {
      logger.error(`Hook ${name} couldn't be executed`);
      logger.error(err);
    }
  }
};

这种方案符合ES模块的静态特性，打包工具（如Webpack、Rollup）可以做树摇优化，性能更优，同时代码可读性更强。

2. 动态批量导入（自动遍历目录，和原库功能一致） #

如果需要自动遍历目录下的所有hook文件（无需手动维护导出），可以结合Node.js的文件系统API和ES6动态导入import()实现：

import { readdir } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

// ES模块环境下手动获取__dirname
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export const executeInitHooks = async () => {
  logger.info(`Executing Init hooks`);
  const hooksDir = join(__dirname, '../../hooks/onInitStart');
  const files = await readdir(hooksDir);

  for (const file of files) {
    // 跳过非JS文件和目录（如果有的话）
    if (!file.endsWith('.js') || file === 'index.js') continue;
    const hookName = file.replace('.js', '');
    try {
      logger.info(`Import ${hookName}`);
      // 动态导入单个hook文件
      const { default: hook } = await import(join(hooksDir, file));
      await hook.run();
    } catch (err) {
      logger.error(`Hook ${hookName} couldn't be executed`);
      logger.error(err);
    }
  }
};

这种方案完全依赖原生API，没有第三方依赖，且能自动识别目录下新增的hook文件，和原import-modules库的功能一致。需要注意：

• 此方案适用于Node.js环境（用到了Node.js的fs模块）
• 动态导入是异步操作，和原代码的async逻辑天然契合
• 打包工具需要支持动态导入的解析（主流工具如Webpack、Vite都支持）

总结 #

• 若项目已稳定使用import-modules且无问题，可继续保留，它能减少手动编写遍历逻辑的工作量；
• 若追求最小依赖、贴合ES规范，原生方案更优——静态方案适合文件固定场景，动态方案适合需要自动遍历的场景。

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