一、rollup.config.js基本配置

例如，以下是一份基本的 rollup.config.js 文件代碼：

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/bundle.js',
      format: 'cjs', // 輸出格式
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm', // 輸出格式
    },
  ],
  plugins: [
    resolve(), // 解析第三方依賴
    commonjs(), // 將 CommonJS 模塊轉換為 ES6
    babel(), // 轉義 ES6/7 代碼為 ES5
  ],
  external: ['react', 'react-dom'], // 外部依賴
  mode: 'production', // 打包模式
};

其中，包括輸入文件 input、輸出文件 output、插件 plugins、外部依賴 external 和打包模式 mode。三個插件的配置：resolve 插件用于解析第三方依賴，commonjs 插件將 CommonJS 模塊轉換為 ES6，babel 插件將 ES6/7 代碼轉換為 ES5。

這個配置文件會將 src/index.js 文件作為入口文件，打包成兩個輸出文件 dist/bundle.js 和 dist/bundle.esm.js，其中 dist/bundle.js 的輸出格式為 cjs，dist/bundle.esm.js 的輸出格式為 esm。在打包過程中，會先解析第三方依賴，將 CommonJS 模塊轉換為 ES6，最后將 ES6/7 代碼轉換為 ES5。在打包過程中，會忽略 react 和 react-dom 兩個外部依賴。打包模式為 production。

二、五大核心配置

基礎配置包括輸入文件（input）、輸出文件（output）、插件（plugins）、外部依賴（external）、打包模式（mode）等。

1. input打包入口文件

在使用 Rollup 進行打包時，需要配置 rollup.config.js 文件，其中 input 配置選項用于指定入口文件，告訴 Rollup 從哪個文件開始打包。具體來說，input 接收一個文件路徑，可以是相對路徑或絕對路徑。

舉個例子：

// rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  }
}

以上配置中，input 指定了入口文件為 src/index.js，表示 Rollup 會從這個文件開始打包。

當我們運行 Rollup 命令后，它會找到入口文件，分析其中的依賴并生成打包后的文件。如果入口文件中包含其他模塊的引用，Rollup 會遞歸地分析它們的依賴，最終將它們打包到生成的文件中。

使用 input 配置選項的好處在于，我們可以將多個模塊的打包合并成一個文件，避免了在瀏覽器中加載多個文件的請求和響應時間。此外，Rollup 的靜態分析能力可以將未使用的代碼以及不必要的依賴移除，使得打包后的文件更小、更快。

綜上所述，input 配置選項是非常重要的一個選項，它指定了入口文件，告訴 Rollup 從哪個文件開始打包，提高了打包的效率和性能。

2. output打包輸出

rollup.config.js的output配置選項用于指定將代碼打包后輸出的路徑和文件名等相關的配置。

以下是output配置選項的常見參數及其說明：

• file：指定打包后輸出的文件路徑和名稱。
• format：指定打包后輸出的代碼格式，可以是amd、cjs、es、iife或umd。
• name：指定打包后的全局變量名，僅當format為iife或umd時使用。
• sourcemap：指定是否生成source map，默認值為false。
• sourcemapFile：指定生成的source map文件位置，默認值為null。
• sourcemapExcludeSources：指定是否將源文件包含在source map中，默認值為false。
• banner：指定輸出文件頭部添加的注釋信息。
• footer：指定輸出文件尾部添加的注釋信息。
• intro：指定輸出文件頭部添加的代碼。
• outro：指定輸出文件尾部添加的代碼。

以一個打包目錄為例，假設我們有以下的目錄結構：

.
├── dist
├── node_modules
├── src
│   ├── index.js
│   └── utils.js
└── rollup.config.js

我們可以將rollup.config.js的output配置選項設置為：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'myLibrary',
    sourcemap: true,
    sourcemapFile: 'dist/bundle.js.map',
    sourcemapExcludeSources: true,
    banner: '/* myLibrary v1.0.0 */',
    footer: '/* https://github.com/my-username/my-library */',
  },
}

上述配置指定了將src/index.js作為入口文件打包為一個umd格式的文件，輸出到dist/bundle.js文件中，并為打包后的代碼指定了全局變量名為myLibrary。同時，打包后會生成一個sourcemap文件，并指定文件名為dist/bundle.js.map，生成的sourcemap會排除源文件，并在打包后的代碼頭部加上"/* myLibrary v1.0.0 /“注釋，在打包后的代碼尾部加上”/ https://github.com/my-username/my-library */"注釋。

3. plugins插件

在使用 Rollup 進行打包時，可以通過在 rollup.config.js 文件中配置 plugins 來實現一些特定的操作，如代碼壓縮、處理 CSS 文件、支持 TypeScript 等。以下是 plugins 配置選項常用的插件及其功能：

1. commonjs()：將 CommonJS 模塊轉為 ES6 模塊，使其能夠被 Rollup 處理和打包。

2. resolve()：解析導入的依賴模塊路徑，以便 Rollup 能夠正確找到依賴模塊。

3. babel()：將 ES6+ 語法轉為 ES5 語法，以便在低版本瀏覽器或者舊版 Node.js 上運行。

4. terser()：對代碼進行壓縮和混淆，以減小文件大小和提高網站性能。

5. postcss()：對 CSS 進行處理，如添加瀏覽器前綴、壓縮等。

6. typescript()：支持使用 TypeScript 進行開發，并將 TypeScript 文件轉為 JavaScript 文件。

下面以一個打包目錄為例來說明如何在 rollup.config.js 中配置 plugins：

import resolve 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/index.js",
  output: {
    file: "dist/bundle.min.js",
    format: "iife",
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: "bundled",
      exclude: "node_modules/**",
    }),
    terser(),
  ],
};

以上配置中，plugins 分別使用了 @rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel 和 rollup-plugin-terser 插件，分別用于解析依賴模塊路徑、轉換 CommonJS 模塊、將 ES6+ 語法轉為 ES5 語法和對代碼進行壓縮和混淆。最終生成的打包文件為 dist/bundle.min.js，打包格式為 iife。

4.external外部依賴

external選項是用來指定哪些模塊是外部依賴，不需要被打包進最終的輸出文件中的。這可以顯著減小打包后的文件大小。

舉一個打包目錄的例子：

假設我們的打包目錄結構如下：

├── src/
│   ├── index.js
│   ├── utils/
│   │   └── helper.js
│   └── lib/
│       └── lodash.js
├── dist/
└── rollup.config.js

其中，src/index.js 文件中引用了 src/utils/helper.js 和 src/lib/lodash.js 兩個文件中的一些函數和變量。

如果我們直接使用默認配置文件打包，最終生成的文件會包含 helper.js 和 lodash.js 中的代碼，導致最終的文件體積變得很大。

為了避免這個問題，我們可以配置 external 選項，告訴 Rollup 這兩個文件應該被視為外部依賴。

在 rollup.config.js 中添加如下代碼：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  external: ['src/utils/helper.js', 'src/lib/lodash.js'],
};

這里使用了相對路徑，直接指定要排除的文件。如果你選擇使用模塊名稱，則需要在代碼中使用 import 或 require 去引入這些模塊，并且在 external 中配置他們的名稱，例如：

import { someFunction } from 'lodash';

export default function test() {
  someFunction();
}

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  external: ['lodash'],
};

最終生成的代碼將不會包含 helper.js 和 lodash.js 中的內容，而是在運行時從外部獲取這些依賴。

5.mode模式

在Rollup.js中，mode配置選項用于指定當前構建的模式，包括production和development兩種模式。具體作用如下：

1. production模式：啟用各種代碼優化，生成的代碼體積更小，執行速度更快。通常用于生產環境。

2. development模式：生成的代碼不會進行優化，方便開發調試。通常用于開發環境。

舉例說明：

當我們設置mode為production時，Rollup.js會自動開啟代碼壓縮、Tree Shaking、Scope Hoisting等優化功能，以減小生成的代碼體積和提高執行效率，適用于生產環境：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  mode: 'production'
};

而當我們設置mode為development時，生成的代碼不會進行優化，不會進行代碼壓縮、Tree Shaking、Scope Hoisting等操作，方便開發調試，適用于開發環境：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.dev.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  mode: 'development'
};

三、總結

到這里大家是不是想到了一個老朋友，webpack.config.js，這些配置看上去是不是很像，哈哈哈
總的來說，rollup.config.js 是構建現代 JavaScript 應用程序的強大工具。在本文中，我們介紹了五個基礎配置，包括輸入文件、輸出文件、插件、外部依賴和模式。這些配置可以幫助我們快速創建優化的 JavaScript 應用程序。但是，這只是 rollup.config.js 的冰山一角。還有很多高級配置和技巧可以使用，比如代碼拆分、動態導入等等。了解 rollup.config.js 的所有特性和細節需要時間和經驗，但是這些基礎配置可以幫助我們快速開始并建立基礎。希望這篇博客能夠對你有所幫助，祝你在使用 rollup.config.js 構建 JavaScript 應用程序時愉快！