Rollup是什麼？

Rollup是一個JavaScript模塊打包器（bundler），它重點關注於ES6模塊化的構建，可以將一組小模塊定義為依賴關係圖，並將它們打包成一個大的JavaScript文件。

一、Rollup怎麼讀？

Rollup的發音和“roll up”的發音相同，後者意思是“捲起來”或者“糾結成一團”等。這個名字的含義很顯然，就是“把所有依賴的JavaScript文件捲起來，整合成一個文件”。

二、Rollup函數

在Rollup中，一個簡單的函數定義可以通過下面的方式進行導入和導出：

//庫代碼示例
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

//應用代碼示例
import {add, subtract} from './math.js';

console.log(add(4,5));
console.log(subtract(4,5));

在這個示例中，所有導出的函數都被包含在了一個叫做“math.js”的模塊文件中。main.js是一個包含了模塊引用的應用文件。通過使用ES6模塊語法，我們可以通過導入來訪問這些函數。

三、Rollup打包忽略文件

Rollup有一個–exclude標誌可以用來指定哪些文件不應該作為依賴項包含在打包文件中。這很有用，因為你可能有一些第三方代碼，或者你自己的舊代碼，不需要包含在打包文件中。

//忽略config.js
rollup -c --exclude config.js

四、Rollup用法

我們可以使用下面的命令安裝Rollup。

// 全局安裝
npm install -g rollup

// 本地安裝
npm install rollup --save-dev

我們可以使用下面的命令來使用Rollup進行打包。

// 打包 main.js
rollup main.js --o bundle.js --f iife

在這個示例中，我們將會打包main.js，並將結果寫入bundle.js，打包格式為iife。

五、Rollup函數的使用方法

Rollup使用JavaScript函數來定義並執行轉換操作。以下是創建基本Rollup函數的示例：

// rollup.config.js示例
export default {
  //打包文件名
  output: {
    file: 'bundle.js',
    format: 'umd'
  },
  // 入口文件
  input: 'main.js'
};

在這個示例中，我們將打包結果寫入bundle.js文件中，打包格式為UMD。

六、Rollup和Webpack的區別

Rollup和Webpack都是現代JavaScript模塊打包工具。兩者之間的主要區別在於打包方案和優化策略。WebPack更重視於構建大型的應用程序，而Rollup重視構建庫和組件。

Rollup相比Webpack的優勢在於：

• 更小的體積，可以讓你的應用更快的加載
• 支持ES6模塊的打包
• 在打包庫時有更好的Tree-shaking能力

七、Rollup英文文檔

如果你習慣閱讀英文文檔，以下是Rollup官方文檔的鏈接。

https://rollupjs.org/guide/en/

八、Rollup的優勢

我們可以總結出Rollup相比其他打包工具的優勢有：

• 更小的文件體積
• 更好的ES6模塊支持
• 支持Tree-shaking，可以剔除無用代碼

九、Rollups

Rollups是Rollup的複數形式，是一個英文單詞，指的是捲起、收起、捆綁的意思。

十、Rollup是什麼意思

Rollup是Roll Up的諧音，中文有“將所有依賴的JavaScript文件捲起來，整合成一個文件”的意思。