如何在React项目所有文件中全局导入ReactJS组件？

原生ES Module规范不存在你描述的「导入单个文件后所有项目文件都自动获得导入内容」的语法，但有3种可行的方案可以实现类似的效果，具体如下：

• 方案1：统一导出入口（最稳妥的规范实现）
  你可以先创建一个统一的组件导出文件，比如src/components/index.js，把所有公共组件都在这个文件里统一导出：

// src/components/index.js
export { default as Button } from './Button'
export { default as Card } from './Card'
export { default as Navbar } from './Navbar'
// 其他所有需要复用的组件依次导出

之后在任意业务文件中，只需要一行代码就能导入所有需要的组件，不需要分别写不同的导入路径：

import { Button, Card, Navbar } from '@/components'

该方案完全符合ES Module规范，类型提示、打包tree shaking都能正常工作，是绝大多数业务项目的首选方案。

• 方案2：构建工具自动注入导入（完全省略导入语句，匹配你的需求）
  如果希望完全不用手写任何导入语句，让公共组件在所有文件里自动可用，可以通过构建工具插件实现：
  如果你的项目用Vite构建，可以使用unplugin-auto-import插件，在vite.config.js中做如下配置：

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        {
          '@/components': ['Button', 'Card', 'Navbar', /* 所有需要自动导入的组件名 */]
        }
      ]
    })
  ]
})

Webpack构建的项目也可以使用该插件的Webpack适配版本，配置逻辑基本一致。配置完成后，你在所有业务文件中可以直接使用配置过的组件，不需要手动写导入语句，插件会在编译阶段自动注入对应的导入逻辑，不会污染全局作用域，也不影响tree shaking。

• 方案3：挂载到全局对象（不推荐）
  你也可以在项目入口文件src/main.jsx中把所有组件挂载到全局window对象上：

// src/main.jsx
import * as AllComponents from '@/components'
window.AllComponents = AllComponents

之后所有文件里都可以通过AllComponents.Button的方式调用组件，但该方案会污染全局作用域，打包时无法删除未使用的组件，类型提示也需要额外配置，仅适合极小的测试项目使用，正式项目不推荐。

内容的提问来源于stack exchange，提问作者Abdul Muhamin Rehman