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

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

一、使用场景

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

javascript 复制代码
useEffect(() => {
  console.log('mounted');
}, []);

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

二、安装插件

javascript 复制代码
pnpm install @rollup/plugin-inject -D

三、完整使用示例(vite.config.ts

javascript 复制代码
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)

javascript 复制代码
// 你不需要再写: 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

javascript 复制代码
// 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

javascript 复制代码
{
  "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 实现自动引入 useEffectuseState 等,务必使用 @vitejs/plugin-react(Babel 版);

    • @vitejs/plugin-react-swc 更适合对性能要求高、不依赖 Babel 插件生态的场景。

  3. 必须在 vite.config.tsplugins 数组中,放在 React 插件之后

相关推荐
-凌凌漆-2 分钟前
【Qt】Qt QML json处理
开发语言·qt·json
弗锐土豆3 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
手握风云-3 分钟前
JavaEE初阶第八期:解锁多线程,从 “单车道” 到 “高速公路” 的编程升级(六)
java·开发语言
Hilaku6 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
浅墨momo11 分钟前
搭建第一个Shopify App
前端·程序员
wangpq15 分钟前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
Codebee16 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C16 分钟前
常见web攻击类型
前端·http
jackyChan16 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript