一、什么是rollup

Rollup是一個JavaScript模塊打包器，它可以將多個JavaScript模塊打包成一個文件。與其他打包工具不同，Rollup專注于打包ES6模塊，這使得輸出的JavaScript文件更加優化和輕量化。Rollup還支持插件系統，可以通過插件實現各種自定義行為，例如將CSS文件打包成單獨的文件或優化輸出的JavaScript文件。Rollup是一個快速、簡單和優化的打包工具，特別適合打包庫和組件。

二、rollup和webpack對比

對比項	Rollup	Webpack
適用范圍	專注于打包 ES6 模塊，適用于構建 JavaScript 庫和組件	適用于構建復雜的應用程序，包括處理 JS、CSS、圖片等
打包速度	較快，因為可以利用 ES6 模塊語法進行靜態分析和優化	相對較慢，因為需要進行更多的代碼轉換和處理
代碼拆分	支持代碼拆分，并且可以生成多個輸出文件	支持代碼拆分，但是需要手動配置
插件生態	插件生態較小，但是可以使用 Rollup.js 插件轉換工具將其他插件轉換為 Rollup 插件	插件生態豐富，社區活躍
配置復雜性	配置相對簡單，但是需要手動處理 CSS、圖片等資源文件	配置較為復雜，但是可以使用社區提供的現成配置模板
代碼質量	生成的代碼質量較高，可讀性強，并且支持 Tree Shaking	生成的代碼質量較低，可讀性差，可能存在冗余代碼
開發體驗	支持實時構建和熱更新，開發體驗良好	支持實時構建和熱更新

三、rollup常用命令行

Rollup 是一個 JavaScript 模塊打包器，可以將多個 JavaScript 模塊打包成一個文件，方便應用程序的開發和部署。常用的 Rollup 命令包括以下幾個：

1. rollup --help

rollup --help 是一個命令行指令，它展示了 Rollup 提供的所有命令行選項和參數，可以幫助用戶了解 Rollup 的使用方法和配置選項。

在命令行中運行 rollup --help，則會展示 Rollup 所有的命令行選項和參數，例如：

Usage: rollup [options]

Options:
  -c, --config <filename>               use this config file (if argument is
                                        omitted, rollup.config.js will be
                                        used if it exists, or else
                                        rollup.config.ts)
  -i, --input <files...>                the entry point(s) of your
                                        application/module
  -o, --file <output>                   the output file (if absent, prints to
                                        stdout)
  -d, --dir <outputDirectory>           the directory in which to place
                                        outputted files
  -f, --format <format>                 the format of the generated bundle
                                        (amd, cjs, es, iife, umd, system)
  -e, --external <ids...>               make this module id external
  -g, --globals <pairs...>              specify global variable names to use,
                                        e.g. -g jquery:$,React:MyReact
  -n, --name <name>                     the name to use for the generated
                                        module bundle (required for IIFE
                                        /UMD)
  -w, --watch                           watch files in bundle for changes
  --watch-stdin                         [experimental] read bundle config from
                                        stdin
  --experimental-optimizations          [experimental] enable additional
                                        experimental code optimizations
  --no-treeshake                        disable tree shaking
  --silent                              suppresses logging
  --intro <intro>                       content to insert at top of bundle
  --outro <outro>                       content to insert at end of bundle
  --banner <banner>                     content to insert at top of output
  --footer <footer>                     content to insert at end of output
  -m, --sourcemap                       generate sourcemap (`-m inline` for
                                        inline map)
  --sourcemap-file <path>               file to write sourcemap to (or use
                                        `--dir` and `--sourcemap-path`
                                        together)
  --sourcemap-path-transform <function> transform the generated sourcemap
                                        path, e.g. `--sourcemap-
                                        path-transform '{"foo": "bar" }'`
                                        changes `path/to/file.js` to
                                        `{foo}/file.js`
  --silent                              suppresses logging
  --no-progress                         do not print progress updates
  --config-stdin                        read config from stdin
  --config-branch <branchName>          select a branch of the exported
                                        configuration (default: `main`)
  --config-plugins <commaSeparatedList> plugins to use (default: all)
  --config-search <searchDir>           use the specified directory as the
                                        root for resolving configurations
                                        (default: `process.cwd()`)
  --config-env <envName>                 environment variables to expose when
                                        loading the config file
  --no-interop                          do not generate an `interop` block
  -h, --help                            output usage information

其中，簡寫 -c 表示 --config，簡寫 -i 表示 --input，簡寫 -o 表示 --file，簡寫 -d 表示 --dir，以此類推。

例如，如果我們希望打包一個文件，并同時監聽文件變化，可以運行如下的命令：

rollup -i input.js -o output.js -w

這將會將 input.js 打包成 output.js 文件，并監聽文件變化，一旦文件變化就重新打包。

2. rollup --version

rollup --version

rollup --version是一個命令行指令，用于顯示當前安裝的Rollup版本號。Rollup是一個JavaScript模塊打包工具，用于將多個JavaScript模塊打包成一個或多個單獨的文件。

舉個例子，假設你的項目使用了Rollup來打包多個JavaScript模塊，但是在構建過程中出現了問題，你需要知道當前安裝的Rollup版本號，以便判斷是否是版本問題導致的錯誤。你可以在命令行中輸入rollup --version來獲取當前Rollup版本號，從而確定是否需要更新Rollup或使用不同的版本來解決問題。

3. rollup：打包入口文件并生成一個文件輸出。

rollup -i input.js -o output.js

rollup -i input.js -o output.js是一個命令行指令，它使用了 Rollup 來將指定的輸入文件 input.js 打包并輸出到指定的輸出文件 output.js 中。

Rollup 是一款 JavaScript 模塊打包器，它可以將代碼中的 ES6 模塊語法轉換為標準的 ES5 語法，并將代碼打包成一個或多個文件，以便于在瀏覽器或 Node.js 環境中使用。

以下是一個示例：

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

my-project/
├── src/
│   ├── main.js
│   ├── module1.js
│   └── module2.js
├── dist/
│   └── bundle.js
└── package.json

我們希望將 src/main.js 和其依賴的模塊打包到一個文件中，并輸出到 dist/bundle.js 中。

我們可以在命令行中運行以下指令：

rollup -i src/main.js -o dist/bundle.js

這將會把 src/main.js 中引用的 src/module1.js 和 src/module2.js 打包進一個文件，輸出到 dist/bundle.js 中。

現在我們可以在 HTML 文件中引入打包后的文件，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

這樣，在瀏覽器中加載 HTML 文件時，就會自動載入打包后的 JavaScript 文件，并執行其中的代碼。

4. rollup -i index.js --file dist.js --format cjs

rollup -i index.js --file dist.js --format cjs 

rollup -i index.js --file dist.js --format cjs 的作用是使用 Rollup 打包index.js 文件，將打包后的代碼輸出到 dist.js 中，并使用CommonJS格式進行輸出。其中，--format 參數指定了打包后的輸出格式。

除了cjs格式外，Rollup 還支持以下幾種格式：

• iife：將代碼作為立即調用函數表達式（Immediately Invoked Function Expression，IIFE）輸出，適合于直接在瀏覽器中使用的代碼。
• umd：將代碼同時支持在瀏覽器和 Node.js 環境中使用。如果引入的環境支持 AMD 或 CommonJS 模塊系統，則代碼以模塊的方式輸出；否則，代碼被包裹在一個 IIFE 中輸出。
• amd：將代碼以 AMD 模塊格式輸出，適合于在 AMD 環境中使用的代碼。

舉例說明：

如果要將代碼打包成IIFE格式，可以使用以下命令：

rollup -i index.js --file dist.js --format iife

如果要將代碼打包成 umd 格式，可以使用以下命令：

rollup -i index.js --file dist.js --format umd --name myLibrary

其中，--name 參數指定了在瀏覽器環境中暴露出去的全局變量名。如果不指定 --name 參數，則默認使用打包后的文件名作為全局變量名。

5. rollup -i index.js -i test.js --dir dist: 將多個入口文件打包到一個文件夾下

rollup -i index.js -i test.js --dir dist

這條命令用于將多個 JavaScript 文件打包成單個文件，并將打包后的文件輸出到指定的目錄中。

其中，-i 表示需要打包的入口文件，可以指定多個入口文件，使用空格分隔。--dir 表示輸出目 錄，即打包后的文件輸出到哪個目錄中。

例如，假設有以下兩個 JavaScript 文件：

• index.js：包含項目的主要代碼邏輯。
• test.js：用于測試的代碼。

如果運行以下命令：

rollup -i index.js -i test.js --dir dist

則會將 index.js 和 test.js 打包成單個文件，并將打包后的文件輸出到 dist 目錄中。生成的文件名和格式由 Rollup 自動確定。可以使用生成的文件來部署項目或進行測試。

6. rollup-watch：監視文件修改并自動重新打包。

rollup -i index.js --file dist.js --watch

rollup -i index.js --file dist.js --watch 命令用于在開發過程中監視并編譯 Rollup 構建的代碼。其中 -i 表示輸入文件為 index.js，--file 表示輸出文件為 dist.js，--watch 表示監視輸入文件并在發現更改時重新構建輸出文件。

舉個例子，假設你正在使用 Rollup 構建一個 JavaScript 應用程序，并將所有代碼放在 src 目錄中。你可以使用以下命令來監視 src/index.js 文件的更改并實時重新構建 dist.js 文件：

rollup -i src/index.js --file dist.js --watch

這個命令會在終端中輸出一些信息，告訴你當前的編譯狀態和構建時間。每當你更新 src/index.js 文件時，Rollup 將自動重新構建 dist.js 文件，并將更改推送到瀏覽器，以實現實時預覽更改。

7. rollup --config：使用配置文件構建項目

rollup --config rollup.config.js

rollup --config rollup.config.js 命令用于指定使用哪個 Rollup 配置文件來構建項目。其中 --config 表示指定配置文件路徑，rollup.config.js 是一個常見的 Rollup 配置文件名。

舉個例子，假設你正在使用 Rollup 構建一個 JavaScript 應用程序，并將所有代碼放在 src 目錄中。你可以創建一個名為 rollup.config.js 的文件，指定 Rollup 如何構建你的應用程序：

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

然后，你可以使用以下命令來構建你的應用程序：

rollup --config rollup.config.js

這個命令將 Rollup 配置文件中的選項作為輸入，構建你的應用程序，并將生成的 dist/app.js 文件輸出到文件系統中。這個命令也可以在 CI/CD 等自動構建系統中使用，以自動構建和部署你的應用程序。

8. 指定環境變量

rollup --config rollup.config.js --environment TEST:ABC

這個命令的作用是運行 Rollup打包工具，并使用 rollup.config.js 配置文件進行配置，同時設置 TEST 環境變量的值為 ABC。其中，TEST 是自定義的環境變量，可以在配置文件中使用 process.env.TEST 進行訪問。

舉例來說，假設我們正在開發一個Web應用，其中有兩個版本：開發版本和生產版本。我們希望在開發版本中啟用一些調試選項，而在生產版本中禁用這些選項以提高性能和安全性。為此，我們可以使用Rollup的環境變量功能。

在 package.json 文件中，我們可以添加兩個腳本：

{
  "scripts": {
    "build:dev": "rollup --config rollup.config.js --environment TARGET:dev",
    "build:prod": "rollup --config rollup.config.js --environment TARGET:prod"
  }
}

然后在配置文件rollup.config.js 中，我們可以使用 process.env.TARGET 值來決定打包的配置選項。例如：

const isDev = process.env.TARGET === 'dev';

export default {
  input: 'src/index.js',
  output: {
    file: isDev ? 'dist/bundle-dev.js' : 'dist/bundle-prod.js',
    format: 'cjs'
  },
  plugins: [
    // 在開發版本中啟用調試選項
    isDev && myDebugPlugin()
  ]
};

在這個例子中，我們可以使用不同的命令來選擇不同的目標環境，并在相應的打包結果中啟用或禁用調試選項。

四、總結

好啦，以上就是關于rollup的常用命令介紹拉，當然所有可以用命令實現的功能，都可以通過配置文件的方式實現，在項目中還是推薦大家使用配置文件的方式。Rollup是一款優秀的打包工具，它可以幫助我們在項目中更加高效地管理代碼。學習Rollup常用命令不僅可以提高我們的工作效率，還可以讓我們更加深入地了解前端打包和編譯的機制。希望您在使用Rollup時能夠更加得心應手，快速高效地完成您的項目