详细使用@rollup/plugin-inject的方式

@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 插件之后。