如何在 webpack 和 Vite 中实现模块的自动导入

为什么需要模块的自动导入

在开发和维护大型项目时，代码库通常会随着功能的扩展变得庞大且复杂。为了保持代码的可维护性和可读性，开发者会将项目内容或模块进行拆分管理。例如，按照功能拆分 API 或者拆分页面组件。这种拆分方法虽然在管理和维护上带来了便利，但每次修改后手动导入模块却变得相当繁琐和低效。

手动导入模块不仅增加了代码的重复性，还容易因为遗漏导入而导致错误。特别是在多人协作的大型项目中，手动管理导入的工作量更是显著增加。这时候，引入自动化工具来处理模块的导入显得尤为重要。

webpack 中的自动导入

webpack 提供了一个强大的功能——require.context API，能够帮助开发者实现模块的自动导入。require.context 通过执行函数获取一个特定的上下文，主要用于动态导入模块。对于需要从某个文件夹中引入多个模块的情况，这个 API 非常有用。

官方文档：https://webpack.js.org/guides/dependency-management/#requirecontext

这里以动态导入 en-US 下的所有翻译文件，合并导出为例：


const requireAll = require.context('./en-US', false, /\.ts$/)
const importAllTranslations = requireAll.keys().map((path: string) => requireAll(path).default || requireAll(path))
const combinedTranslations = importAllTranslations.reduce((acc: any, cur: any) => Object.assign(acc, cur), {})

export default combinedTranslations

Vite 中的自动导入

Vite 中也有着类似的 API —— import.meta.glob，其可以从文件系统导入多个模块。

官方文档：https://cn.vitejs.dev/guide/features.html#glob-import

仍然和 webpack 一样的场景，以动态导入 en-US 下的所有翻译文件，合并导出为例：


export default defineI18nLocale(() => {
  const importAllTranslations = import.meta.glob(
    ['../lang/en-US/*.ts'],
    {
      eager: true,
      import: 'default',
    },
  )
  const combinedTranslations = Object.values(importAllTranslations).reduce(
    (acc: any, cur: any) => Object.assign(acc, cur),
    {},
  )
  return combinedTranslations
})

通过这种方式，i18n 文件的结构就可以是这样的，对 i18n 文件进行拆分管理，非常适合大型的展示类的网站项目。

这同样适用于其他情况，比如 API 模块化、批量注册全局组件、路由模块化等，合理的使用这一方法能够更好的规范和管理项目。