汪图南
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • Rollup基础

    • Rollup介绍
    • 核心概念
    • 基础配置
    • 配置项类型提示
    • 配置package.json
    • 常用插件
  • Rollup配置案例

    • Babel转义
    • 支持TypeScript
    • 环境区分
    • Eslint
    • 支持Jest自动化测试
    • 提交规范
    • Changelog

常用插件

注意

注意,Rollup中插件的顺序是有要求的,一般会把解析和转换相关的插件写在前面。

Rollup并不像webpack那样强大,它需要和其它插件配合使用才能完成特定的功能,常用的插件有:

  • @rollup/plugin-commonjs:将CommonJs规范的模块转换为ESM规范,提供Rollup使用。
  • @rollup/plugin-node-resolve:与@rollup/plugin-commonjs插件一起使用,配合以后就可以使用node_modules下的第三方模块代码了。
  • @rollup/plugin-babel:把ES6代码转义成ES5代码,需要同时安装@babel/core和@babel/preset-env插件。注意:如果使用了高于ES6标准的语法,例如async/await,则需要进行额外的配置。
  • @rollup/plugin-terser:代码压缩插件。
  • @rollup/plugin-json: 支持从.json读取信息,配合Rollup的Tree Shaking可只打包.json文件中我们真正用到的部分。

以上插件使用案例如下:

// rollup.config.mjs
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import json from '@rollup/plugin-json'
import typescript from '@rollup/plugin-typescript'
import terser from '@rollup/plugin-terser'

const config =  {
  ...省略其它
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    babel(),
    json(),
    terser()
  ]
}

export default config

以上仅列举最常见的插件,Rollup维护了很多其它plugins,你可点击Rollup官方插件列表查看更多内容。

最后更新时间: 2025/5/6 15:36
贡献者: wangtunan
Prev
配置package.json