Rollup 是一個 JavaScript 模塊打包工具，專注于 ES 模塊的打包，常用于打包 JavaScript 庫。下面從它的工作原理、特點、使用場景、配置和與其他打包工具對比等方面進行詳細講解。
一、 工作原理
Rollup 的核心工作是分析代碼中的 import 和 export 語句，確定模塊之間的依賴關系，然后將所有模塊打包成一個或多個文件。具體步驟如下：
- 入口分析：Rollup 從指定的入口文件開始，解析其中的 import 語句，找出所有直接和間接依賴的模塊。
- 模塊收集：遞歸地收集所有依賴的模塊，并將它們構建成一個模塊圖，這個圖描述了模塊之間的依賴關系。
- 代碼轉換：根據配置，對收集到的模塊代碼進行轉換。
例如使用 Babel 進行代碼轉譯，使其兼容更多的瀏覽器或環境。 - 打包輸出：將所有模塊合并成一個或多個文件，并根據配置進行代碼分割、壓縮等操作，最終輸出到指定的目錄
二、 特點
- 基于 ES 模塊**：Rollup 原生支持 ES 模塊，能夠充分利用 ES 模塊的靜態結構進行打包，這使得它在處理 ES 模塊時非常高效，并且可以實現 Tree Shaking 功能。
- Tree Shaking：Tree Shaking 是 Rollup 的一個重要特性，它可以在打包過程中自動移除未使用的代碼，從而減小打包文件的體積。
例如，如果你導入了一個模塊，但只使用了其中的部分功能，Rollup 會只打包你使用的部分，而忽略其他未使用的代碼。 - 簡潔的 API：Rollup 提供了簡潔的 API，方便開發者自定義插件和配置，使得它可以靈活地適應不同的項目需求。
- 輕量級：相比于 Webpack 等大型打包工具，Rollup 的核心功能相對簡單，沒有過多的額外功能，因此在處理簡單項目時，速度更快，配置也更簡單。
三、使用場景
- JavaScript 庫開發：由于 Rollup 能夠生成簡潔、高效的代碼，并且支持 Tree Shaking，因此非常適合用于開發 JavaScript 庫。它可以將庫代碼打包成一個或多個文件，方便用戶在不同的環境中使用。
- 小型項目：對于一些小型的前端項目，Rollup 的輕量級和簡潔性使其成為一個不錯的選擇。它可以快速完成打包任務，并且不會引入過多的復雜性。
四、 配置示例
Rollup 的配置文件通常是一個 JavaScript 文件，使用 rollup.config.js 命名。以下是一個簡單的配置示：
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';export default {// 入口文件input: 'src/main.js',output: [{// 輸出格式為 ES 模塊format: 'es',// 輸出文件路徑file: 'dist/bundle.esm.js'},{// 輸出格式為 CommonJS 模塊format: 'cjs',file: 'dist/bundle.cjs.js'}],plugins: [// 解析 node_modules 中的模塊nodeResolve(),// 將 CommonJS 模塊轉換為 ES 模塊commonjs(),// 使用 Babel 進行代碼轉譯babel({babelHelpers: 'bundled',exclude: 'node_modules/**'}),// 壓縮代碼terser()]
};
這個配置文件指定了入口文件、輸出格式和文件路徑，并使用了一些插件來處理模塊解析、代碼轉譯和壓縮等任務。
五、與其他打包工具對比
5.1 與 Webpack 對比
- 功能復雜度：Webpack 功能更強大，支持處理各種類型的資源，如 CSS、圖片等，并且提供了豐富的插件和 loader 生態系統。而 Rollup 主要專注于 JavaScript 模塊的打包，功能相對簡單。
- 適用場景：Webpack 適用于大型的前端應用開發，尤其是需要處理復雜資源和實現各種高級功能（如代碼分割、按需加載）的項目。Rollup 更適合用于開發 JavaScript 庫和小型項目。
- 性能：在處理小型項目時，Rollup 的打包速度通常比 Webpack 快，因為它的核心功能更簡單。但在處理大型項目時，Webpack 的性能優化和并行處理能力可能會更有優勢。
5.2 與 Vite 對比
- 開發環境：Vite 在開發環境下利用瀏覽器原生 ES 模塊的支持，實現了快速冷啟動和熱更新，而Rollup 在開發環境下需要對整個項目進行打包，啟動速度相對較慢。
- 生產環境：Vite 在生產環境中使用 Rollup 進行打包，結合了 Rollup 的打包能力和自身的開發體驗優勢。因此，在生產環境下，兩者的打包結果和性能表現相似。
六、 綜上所述
Rollup 是一個專注于 ES 模塊打包的工具，具有簡潔、高效的特點，適合用于開發 JavaScript 庫和小型項目。
