簡介 | rollup.js 中文文檔 | rollup.js中文網(wǎng)

簡介 | rollup.js 中文文檔 | rollup.js中文網(wǎng)

跳到主要內容rollup.js 中文文檔REPLGitHub英文官網(wǎng)起步簡介命令行接口JavaScript API更多信息教程ES 模塊語法常見問題故障排除遷移到 Rollup 4Rollup 與其它工具的集成API配置選項插件開發(fā)起步簡介本頁總覽簡介概括?Rollup 是一個用于 JavaScript 的模塊打包工具，它將小的代碼片段編譯成更大、更復雜的代碼，例如庫或應用程序。它使用 JavaScript 的 ES6 版本中包含的新標準化代碼模塊格式，而不是以前的 CommonJS 和 AMD 等特殊解決方案。ES 模塊允許你自由無縫地組合你最喜歡的庫中最有用的個別函數(shù)。這在未來將在所有場景原生支持，但 Rollup 讓你今天就可以開始這樣做。安裝?npm install --global rollup這將使 Rollup 可以作為全局命令行工具使用。你也可以在本地安裝它，請參閱 在本地安裝 Rollup?？焖匍_始?可以通過帶有可選配置文件的 命令行界面 或 JavaScript API 來使用 Rollup。運行rollup --help以查看可用選項和參數(shù)。參見 rollup-starter-lib 和 rollup-starter-app，以查看使用 Rollup 的示例庫和應用程序項目。這些命令假定你的應用程序入口點命名為 main.js，并且希望將所有導入編譯到一個名為 bundle.js 的單個文件中。對于瀏覽器：# 編譯為包含自執(zhí)行函數(shù)（'iife'）的 或者，使用 -f system 選項進行 SystemJS 構建：shellrollup src/main.js src/main2.js -f system -d dist通過以下方式安裝 SystemJSshellnpm install --save-dev systemjs然后根據(jù)需要在 HTML 頁面中加載一個或兩個入口點：html

請參考 rollup-starter-code-splitting 示例，了解如何在支持原生 ES 模塊的瀏覽器上設置使用它們的 Web 應用程序，并在必要時回退到 SystemJS。 在 GitHub 上編輯此頁Previous pageJavascript APINext pageES 模塊語法基于 MIT 協(xié)議發(fā)布Copyright ? 2015-present Rollup 社區(qū)貢獻者

配置選項 | rollup.js 中文文檔 | rollup.js中文網(wǎng)

配置選項 | rollup.js 中文文檔 | rollup.js中文網(wǎng)

跳到主要內容rollup.js 中文文檔REPLGitHub英文官網(wǎng)起步簡介命令行接口JavaScript API更多信息教程ES 模塊語法常見問題故障排除遷移到 Rollup 4Rollup 與其它工具的集成API配置選項插件開發(fā)API配置選項本頁總覽配置選項核心功能?external?類型：(string \| RegExp)[]\| RegExp\| string\| (id: string, parentId: string, isResolved: boolean) => booleanCLI：-e/--external 該選項用于匹配需要排除在 bundle 外部的模塊，它的值可以是一個接收模塊 id 參數(shù)并返回 true （表示外部依賴）或 false （表示非外部依賴）的函數(shù)，也可以是一個模塊 ID 數(shù)組或者正則表達式。除此之外，它還可以只是單個的模塊 ID 或正則表達式。被匹配的模塊 ID 應該滿足以下條件之一：外部依賴的名稱，需要和引入語句中寫法完全一致。例如，如果想標記 import "dependency.js" 為外部依賴，就需要使用 "dependency.js" 作為模塊 ID；而如果要標記 import "dependency" 為外部依賴，則使用 "dependency"。解析過的模塊 ID（如文件的絕對路徑）。// rollup.config.jsimport { fileURLToPath } from 'node:url';export default { //..., external: [ 'some-externally-required-library', fileURLToPath( new URL( 'src/some-local-file-that-should-not-be-bundled.js', import.meta.url ) ), /node_modules/ ]};請注意，如果要通過 /node_modules/ 正則表達式過濾掉包的引入，例如 import {rollup} from 'rollup'，需要先使用類似 @rollup/plugin-node-resolve 的插件，來將引入依賴解析到 node_modules。當用作命令行參數(shù)時，該選項的值應該是一個以逗號分隔的模塊 ID 列表：rollup -i src/main.js ... -e foo,bar,baz當該選項的值為函數(shù)時，它提供了三個參數(shù) (id, parent, isResolved)，可以為你提供更細粒度的控制：id 為相關模塊 idparent 為進行引入的模塊 idisResolved 表示 id 是否已被插件等解析當創(chuàng)建 iife 或 umd 格式的 bundle 時，你需要通過 output.globals 選項提供全局變量名，以替換掉外部引入。如果一個相對引入，即以 ./ 或 ../ 開頭，被標記為 external，rollup 將在內部將該模塊 ID 解析為絕對路徑，以便引入的不同外部模塊可以合并。當寫入生成的 bundle 后，這些引入模塊將再次被轉換為相對引入。例如：// 輸入// src/main.js （入口文件）import x from '../external.js';import './nested/nested.js';console.log(x);// src/nested/nested.js// 如果引入依賴已存在，它將指向同一個文件import x from '../../external.js';console.log(x);// 輸出// 不同的依賴將會合并import x from '../external.js';console.log(x);console.log(x);如果存在多個入口，rollup 會轉換回相對引入的方式，就像 output.file 或 output.dir 與入口文件或所有入口文件位于相同目錄。input?類型：string \| string []\| { [entryName: string]: string }CLI：-i/--input 該選項用于指定 bundle 的入口文件（例如，你的 main.js，app.js 或 index.js 文件）。如果值為一個入口文件的數(shù)組或一個將名稱映射到入口文件的對象，那么它們將被打包到單獨的輸出 chunks。除非使用 output.file 選項，否則生成的 chunk 名稱將遵循 output.entryFileNames 選項設置。當該選項的值為對象形式時，對象的屬性名將作為文件名中的 [name]，而對于值為數(shù)組形式，數(shù)組的值將作為入口文件名。請注意，當選項的值使用對象形式時，可以通過在名稱中添加 / 來將入口文件放入不同的子文件夾。以下例子將根據(jù) entry-a.js 和 entry-b/index.js，產生至少兩個入口 chunks，即 index.js文件將輸出在 entry-b 文件夾中：// rollup.config.jsexport default { ..., input: { a: 'src/main-a.js', 'b/index': 'src/main-b.js' }, output: { ..., entryFileNames: 'entry-[name].js' }};如果你想將一組文件轉換為另一種格式，并同時保持文件結構和導出簽名，推薦的方法是將每個文件變成一個入口文件，而不是使用 output.preserveModules，后者可能會導出被除屑優(yōu)化，并產生由插件創(chuàng)建的虛擬文件。你可以動態(tài)地處理，例如通過 glob 包。import { globSync } from 'glob';import path from 'node:path';import { fileURLToPath } from 'node:url';export default { input: Object.fromEntries( globSync('src/**/*.js').map(file => [ // 這里將刪除 `src/` 以及每個文件的擴展名。 // 因此，例如 src/nested/foo.js 會變成 nested/foo path.relative( 'src', file.slice(0, file.length - path.extname(file).length) ), // 這里可以將相對路徑擴展為絕對路徑，例如 // src/nested/foo 會變成 /project/src/nested/foo.js fileURLToPath(new URL(file, import.meta.url)) ]) ), output: { format: 'es', dir: 'dist' }};如果某些插件在 buildStart 鉤子結束前至少生成了一個 chunk（使用 this.emitFile），則該選項可以省略。當使用命令行時，多個入口只需要多次使用該選項輸入。當作為第一個選項提供時，相當于不以 --input 為前綴：rollup --format es --input src/entry1.js --input src/entry2.js# 等同于rollup src/entry1.js src/entry2.js --format es可以使用 = 賦值來命名 chunk：rollup main=src/entry1.js other=src/entry2.js --format es可以使用引號指定包含空格的文件名：rollup "main entry"="src/entry 1.js" "src/other entry.js" --format esoutput.dir?類型：stringCLI：-d/--dir 該選項用于指定所有生成的 chunk 被放置在哪個目錄中。如果生成一個以上的 chunk，那么這個選項是必需的。否則，可以使用 file 選項來代替。output.file?類型：stringCLI：-o/--file 該選項用于指定要寫入的文件。如果適用的話，也可以用于生成 sourcemap。只有在生成的 chunk 不超過一個的情況下才可以使用。output.format?類型：stringCLI：-f/--format 默認："es"該選項用于指定生成的 bundle 的格式。滿足以下其中之一：amd – 異步模塊加載，適用于 RequireJS 等模塊加載器cjs – CommonJS，適用于 Node 環(huán)境和其他打包工具（別名：commonjs）es – 將 bundle 保留為 ES 模塊文件，適用于其他打包工具，以及支持