JavaScript 中怎么在 Vite 中使用 Rollup 插件生态增强构建能力-js教程-PHP中文网

vite 默认使用 rollup 作为生产构建器，天然兼容 rollup 插件，只需在 build.rollupoptions.plugins 中注册即可；需注意插件兼容性、避免重复内置功能、适配 ssr/lib 构建，并优先选用 vite 原生替代方案。

javascript 中怎么在 vite 中使用 rollup 插件生态增强构建能力

Vite 默认使用 Rollup 作为底层构建器（开发阶段用 esbuild 快速启动，生产构建交由 Rollup 处理），因此它天然兼容 Rollup 插件生态。你不需要额外配置 Rollup，只需在 vite.config.ts（或 .js）中直接引入并注册 Rollup 插件即可生效。

确认插件兼容性与安装

不是所有 Rollup 插件都默认适配 Vite —— 尤其是那些依赖 Rollup 特定生命周期钩子（如 generateBundle）或操作原始 AST 的插件，需注意是否支持 Vite 的构建上下文（例如是否处理了 ssr 模式、lib 构建等）。建议优先选用明确标注 “Vite compatible” 或在 Vite 官方插件市场收录的插件。

安装插件时，通常走 npm/yarn/pnpm：例如 npm install @rollup/plugin-node-resolve --save-dev
多数官方 Rollup 插件（如 @rollup/plugin-commonjs、@rollup/plugin-json、@rollup/plugin-terser）可直接使用，但部分需配合 build.rollupOptions.plugins 注入
避免重复启用 Vite 已内置的功能（如 json、css、asset 加载），除非你需要定制行为

在 vite.config.ts 中注入 Rollup 插件

Vite 的 build.rollupOptions.plugins 字段就是 Rollup 插件的入口。你可以将插件数组直接写在这里，顺序影响执行优先级（靠前的插件先处理）。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

基础写法示例：

import { defineConfig } from 'vite'<br>import nodeResolve from '@rollup/plugin-node-resolve'<br>import commonjs from '@rollup/plugin-commonjs'<br><br>export default defineConfig({<br>  build: {<br>    rollupOptions: {<br>      plugins: [<br>        nodeResolve(),<br>        commonjs()<br>      ]<br>    }<br>  }<br>)

插件支持传参，例如 terser({ compress: true }) 可用于压缩代码
若插件有 Vite 原生替代方案（如 vite-plugin-compression 替代 rollup-plugin-gzip），优先选 Vite 插件——它们更贴合 dev server 和 HMR 行为

处理 SSR 或 Library 构建等特殊场景

当项目开启 ssr 或以 build.lib 模式构建时，Rollup 插件会作用于对应输出目标。此时需留意插件是否支持多入口、多格式（cjs/esm/iife）或 SSR 上下文。

例如 @rollup/plugin-replace 在 SSR 构建中可能需要区分 process.env.NODE_ENV，应配合 preventAssignment: true 避免污染全局
某些插件（如 rollup-plugin-visualizer）只对生产构建有效，建议用 process.env.NODE_ENV === 'production' 控制启用时机
若插件修改 output 或生成额外文件（如 sourcemap、stats.json），确保路径不与 Vite 默认输出冲突（如 dist/）