React.js如何自动加载同文件夹多文件以减少import导入语句

完全可以通过统一出口或者构建工具的批量导入能力，省略上百条重复的组件导入语句，以下是生产环境常用的两种实现方式：

方案1：使用Barrel File（文件夹统一出口）聚合导出 #

在你的./forms表单文件夹根目录新建index.js文件，作为所有表单组件的统一对外出口：

• 如果组件都是默认导出（export default），直接在index.js中重导出所有组件：

// ./forms/index.js
export { default as form1 } from './form1'
export { default as form2 } from './form2'
export { default as form3 } from './form3'
// 剩余组件按相同规则补充即可

后续在业务代码中导入组件时，只需要写一行导入语句，按需解构出需要的组件即可：

import { form1, form2, form5 } from './forms'

如果觉得手动写index.js的导出语句太麻烦，可以直接用VS Code的Barrel类插件（比如Barrel Generator）右键一键生成目录下所有文件的导出规则，不需要手动敲上百行代码。

方案2：借助构建工具能力全量自动导入 #

如果不想维护统一出口文件，尤其是需要根据字段动态渲染表单的场景，可以直接用构建工具提供的文件扫描能力，一次性导入目录下所有组件，连手动补导出的步骤都省了：

• Webpack项目使用require.context实现：

import React from 'react'
// 扫描./forms目录下所有js/jsx文件，不递归子目录
const formFiles = require.context('./forms', false, /\.(js|jsx)$/)
const forms = {}
formFiles.keys().forEach(filePath => {
  // 从文件路径提取组件名，比如./form1.js提取为form1
  const compName = filePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  forms[compName] = formFiles(filePath).default
})

// 使用时直接从forms对象取值即可，比如<forms.form1 />

• Vite/Rollup项目使用import.meta.glob实现：

import React from 'react'
// 同步批量导入forms目录下所有js/jsx组件
const formModules = import.meta.glob('./forms/*.{js,jsx}', { eager: true })
const forms = {}
Object.entries(formModules).forEach(([path, mod]) => {
  const compName = path.replace(/^\.\/forms\/(.*)\.\w+$/, '$1')
  forms[compName] = mod.default
})

// 同样通过forms.form1、forms.form2的方式调用组件

注意：你贴的示例代码里重复导入了两次form1，同名变量重复导入会直接触发语法错误，实际开发要避免这类问题。如果你的业务是根据后端返回的类型标识动态渲染对应表单，第二种自动生成forms对象的方案适配性更好，不需要提前声明要使用的组件名，直接拿字符串key就能取到对应组件渲染。

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