Rollup.js 全面指南

项目介绍

Rollup.js 是一个高效的 JavaScript 模块打包器，专为 ES6 模块设计。它将多个小代码片段智能合并成更大的、准备发布的代码块，如库或应用程序。Rollup 利用了 ES6 中的模块系统，使得开发者能够轻松地分割代码，仅引入真正需要的部分。它不仅促进了模块化的编码实践，还通过其树摇（Tree-Shaking）功能剔除未使用的代码片段，从而生成更紧凑、性能更佳的输出。

项目快速启动

要迅速开始使用 Rollup，遵循以下步骤：

安装 Rollup

首先，通过 npm 安装 Rollup，可以选择全局安装或局部安装到项目中。

npm install --global rollup

或者，如果你打算在项目内部管理 Rollup，执行：

npm install --save-dev rollup

创建基本配置及启动打包

创建一个简单的 Rollup 配置文件 rollup.config.js:

export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'umd', // 支持UMD，IIFE, CJS等格式
    name: 'MyLibrary' // UMD格式需要指定名称
  }
};

接着，在终端运行 Rollup 打包命令：

rollup -c

这样就会根据配置将源文件打包到指定的输出文件中。

应用案例和最佳实践

示例库搭建

参考 rollup-starter-lib，这是一个很好的起点，展示了如何建立一个基于 ES 模块的库并进行打包。最佳实践中，应充分利用 ES6 模块的导出功能来精心设计模块接口，并利用 Rollup 的 Tree-Shaking特性来保证产出物尽可能精简。

代码分割的最佳实践

为了提升加载速度，将应用程序的不同部分拆分为不同的包，利用动态import()来按需加载。

import('./component').then((module) => {
  module.default();
});

典型生态项目

Rollup 生态中，很多项目利用其优势，比如：

• Vue.js: Vue 的单文件组件编译在生产环境中默认使用 Rollup 进行打包，以支持 Tree-Shaking。
• Preact: 类似 React 的轻量级框架，其构建过程也涉及 Rollup，突出轻量和效率。

通过这些生态项目，Rollup 显示了在现代前端开发中作为一个强大打包工具的重要性，尤其是在追求高效、模块化和未来标准兼容性的项目中。

---

以上就是 Rollup.js 的概览、快速启动指南、应用案例以及一些生态项目。通过遵循这些步骤，开发者可以轻松上手，享受 Rollup 带来的便捷和性能优化。