@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"]
}

?

? 注意事項

1. 不支持全局類型聲明：TS 類型檢查仍然會報錯。你需要在 global.d.ts 中添加類型聲明或安裝 vite-plugin-define-options 自動處理。

2. @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 插件生態的場景。

3. 必須在 vite.config.ts 的 plugins 數組中，放在 React 插件之后。

?