首頁 >web前端 >js教程 >匯總介紹。

匯總介紹。

尊渡假赌尊渡假赌尊渡假赌原創: 2025-02-10 16:01:10653瀏覽

crolup.js：下一代JavaScript模塊Bundler

An Introduction to the Rollup.js JavaScript Bundler

由Rich Harris（也是Svelte的作者）創建的

滾動。與某些多合一捆綁包不同，匯總主要集中在JavaScript上，提供速度和自定義優勢。讓我們探索其關鍵功能以及如何有效使用它。

使用lullup.js：

：

簡化的開發：
在構建過程中， 增強的代碼質量：在構建過程中與襯裡，格式化器和語法檢查器無縫集成。
搖樹優化：智能地刪除未使用的代碼，導致捆綁較小，更快。
向後兼容：將現代JavaScript（ES6）轉換為ES5，確保更廣泛的瀏覽器支持。
靈活的輸出：生成多個輸出格式（ES5，ES6模塊，commonjs），以適應各種項目需求。 >
通常比其他捆綁器更快，更自定義，尤其是使用複雜的配置。 >

>安裝：

crolup.js需要node.js v8.0.0或更高版本。您可以在全球安裝它：

>對於在Node.js項目上工作的大型團隊，建議將本地安裝用於版本一致性：

<code class="language-bash">npm install rollup --global</code>

>本地安裝後，使用

<code class="language-bash">npm install rollup --save-dev</code>

>執行命令。或者，在

腳本中定義匯總命令：npx rollup package.json

這些腳本可以使用

<code class="language-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"
}</code>

>或

運行。本教程主要用於更廣泛的兼容性。 npm run watch> npm run buildnpx rollup一個簡單的示例：

>讓我們創建一個基本的數字時鐘示例，以說明匯總功能。您可以從github下載示例文件或手動創建它們。

src/main.js：

（主入口點）

> src/lib/dom.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);
}

（時間格式化函數）

<code class="language-javascript">export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}</code>

（html顯示時鐘）

<code class="language-javascript">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());
}</code>

快速啟動：

<code class="language-html"><!DOCTYPE html>


  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">


  <h1>Clock</h1>
  <time class="clock"></time>
  
   
</code>

捆綁代碼，從項目的root目錄運行此命令：>

這會創建。請注意，未使用的功能將通過震動來刪除。

參考這個捆綁文件。

鍵滾動.js配置選項：

--file或-o：指定輸出文件名。
--format>或-f：定義輸出格式（iife，es，cjs，umd，amd，system，
--sourcemap：生成一個源地圖，以更輕鬆地調試（用於內聯源圖）。 --sourcemap inline
：觀看文件更改並自動重建。 --watch / -w
>配置文件（rolup.config.js）：--config-c rollup.config.js>配置文件簡化了管理多個選項和插件。這是一個示例：

>以：運行

插件：

<code class="language-bash">npm install rollup --global</code>

> 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中文網其他相關文章！

JavaScript json html es6 npm Array define for date format include Directory using map JS dom this display github Other

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何設置與React開發的代碼下一篇：如何設置與React開發的代碼

看更多