crolup.js：下一代JavaScript模塊Bundler
滾動。 與某些多合一捆綁包不同，匯總主要集中在JavaScript上，提供速度和自定義優勢。 讓我們探索其關鍵功能以及如何有效使用它。
使用lullup.js：：
crolup.js需要node.js v8.0.0或更高版本。 您可以在全球安裝它：
>對於在Node.js項目上工作的大型團隊，建議將本地安裝用於版本一致性：
npm install rollup --global
>本地安裝後，使用
npm install rollup --save-dev
腳本中定義匯總命令：npx rollup
package.json
"scripts": {
"watch": "npx rollup ./src/main.js --file ./build/bundle.js --format es --watch",
"build": "npx rollup ./src/main.js --file ./build/bundle.js --format es",
"help": "npx rollup --help"
}運行。 本教程主要用於更廣泛的兼容性。 npm run watch>
npm run buildnpx rollup一個簡單的示例：
>讓我們創建一個基本的數字時鐘示例，以說明匯總功能。 您可以從github下載示例文件或手動創建它們。
src/main.js：
（主入口點）import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';
const clock = dom.get('.clock');
if (clock) {
console.log('initializing clock');
setInterval(() => {
clock.textContent = formatHMS();
}, 1000);
}export function get(selector, doc = document) {
return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
return doc.querySelectorAll(selector);
}function timePad(n) {
return String(n).padStart(2, '0');
}
export function formatHM(d = new Date()) {
return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}
export function formatHMS(d = new Date()) {
return formatHM(d) + ':' + timePad(d.getSeconds());
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rollup.js testing</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <h1>Clock</h1> <time class="clock"></time> <🎜> <🎜> </body> </html>
這會創建。 請注意，未使用的功能將通過震動來刪除。
參考這個捆綁文件。鍵滾動.js配置選項：
>--file或-o：指定輸出文件名。 --format>或-f：定義輸出格式（iife，es，cjs，umd，amd，system，--sourcemap：生成一個源地圖，以更輕鬆地調試（用於內聯源圖）。
--sourcemap inline--watch
/
-w
--config-c
rollup.config.js>配置文件簡化了管理多個選項和插件。 這是一個示例：>以： 運行
插件：
npm install rollup --global
npx rollup --config
：andles node.js模塊分辨率。 ：將COMPORJS模塊轉換為ES模塊。
> ：在構建過程中替換代碼中的代幣。@rollup/plugin-node-resolve：將ES6代碼轉換為ES5（考慮現代瀏覽器支持的替代方案）。 @rollup/plugin-commonjs：減去輸出代碼。 @rollup/plugin-replace記住使用@rollup/plugin-buble中。 rollup-plugin-terser高級技術：
npm install <plugin-name> --save-dev</plugin-name>>plugins>環境變量：rollup.config.js>使用環境變量（例如，
>多個捆綁包：
配置匯總以從不同的入口點生成多個捆綁。NODE_ENV>
以上是匯總介紹。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
