@rollup/plugin-inject 是一个 Rollup 插件，它允许你在构建时自动注入模块中的变量引用，避免手动在每个文件中 import。Vite 使用的是 Rollup 构建底层，因此该插件在 Vite 项目中也适用。

一、使用场景

比如你希望在代码中不手动写 import { useEffect } from 'react'，而是像这样直接写：

useEffect(() => {console.log('mounted');
}, []);

只要你在 vite.config.ts 中通过 @rollup/plugin-inject 配置好 useEffect，就能自动注入。

二、安装插件

pnpm install @rollup/plugin-inject -D

三、完整使用示例（`vite.config.ts`）

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import inject from '@rollup/plugin-inject';
import path from 'path';export default defineConfig({plugins: [react(),inject({React: 'react',useState: ['react', 'useState'],useEffect: ['react', 'useEffect'],useRef: ['react', 'useRef'],useMemo: ['react', 'useMemo'],useCallback: ['react', 'useCallback'],useContext: ['react', 'useContext'],useNavigate: ['react-router-dom', 'useNavigate'],useLocation: ['react-router-dom', 'useLocation'],useTranslation: ['react-i18next', 'useTranslation'],message: ['antd', 'message'],notification: ['antd', 'notification'],_: 'lodash',dayjs: 'dayjs',}),],resolve: {alias: {'@': path.resolve(__dirname, './src'),},},
});

四、示例代码（无需 import）

// 你不需要再写： import React, { useEffect } from 'react'function Demo() {const [count, setCount] = useState(0);useEffect(() => {console.log('mounted');}, []);return <div>{count}</div>;
}

五、搭配 TypeScript 全局声明使用（防止 TS 报错）

创建文件 src/global.d.ts：

// React
declare const React: typeof import('react');
declare const useState: typeof import('react')['useState'];
declare const useEffect: typeof import('react')['useEffect'];
declare const useRef: typeof import('react')['useRef'];
declare const useMemo: typeof import('react')['useMemo'];
declare const useCallback: typeof import('react')['useCallback'];
declare const useContext: typeof import('react')['useContext'];// React Router
declare const useNavigate: typeof import('react-router-dom')['useNavigate'];
declare const useLocation: typeof import('react-router-dom')['useLocation'];// i18n
declare const useTranslation: typeof import('react-i18next')['useTranslation'];// Ant Design
declare const message: typeof import('antd')['message'];
declare const notification: typeof import('antd')['notification'];// 工具库
declare const _: typeof import('lodash');
declare const dayjs: typeof import('dayjs');

六、tsconfig.json 配置

确保 global.d.ts 被 TypeScript 编译器加载。修改你的 tsconfig.json：

{"compilerOptions": {"target": "ESNext","lib": ["DOM", "DOM.Iterable", "ESNext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": false,"forceConsistentCasingInFileNames": true,"module": "ESNext","moduleResolution": "Node","resolveJsonModule": true,"isolatedModules": true,"jsx": "react-jsx","noEmit": true,"baseUrl": ".","paths": {"@/*": ["src/*"]}},"include": ["src", "src/global.d.ts"],"exclude": ["node_modules"]
}

⚠ 注意事项

不支持全局类型声明：TS 类型检查仍然会报错。你需要在 global.d.ts 中添加类型声明或安装 vite-plugin-define-options 自动处理。
@vitejs/plugin-react-swc 不支持 @rollup/plugin-inject（SWC 编译不走 Rollup transform）❌。
- 只能配合 @vitejs/plugin-react 使用 ✅。
- 不能同时在 plugins 中使用这两个插件，否则会有冲突；
- @vitejs/plugin-react-swc 是基于 SWC 的替代构建器，比 Babel 更快，但不支持 @rollup/plugin-inject 这类需要 AST 转换的功能；
- 如果你需要使用 inject 实现自动引入 useEffect、useState 等，务必使用 @vitejs/plugin-react（Babel 版）；
- @vitejs/plugin-react-swc 更适合对性能要求高、不依赖 Babel 插件生态的场景。
必须在 vite.config.ts 的 plugins 数组中，放在 React 插件之后。