Rollup.js JavaScript Bundlerの紹介-jsチュートリアル-php.cn

Rollup.js JavaScript Bundlerの紹介

尊渡假赌尊渡假赌尊渡假赌

リリース： 2025-02-10 16:01:10

オリジナル

646 人が閲覧しました

rollup.js：次世代のJavaScriptモジュールBundler

An Introduction to the Rollup.js JavaScript Bundler

Rich Harris（Svelteの著者でもある）が作成した

rollup.jsは、複数のソースファイルを単一の最適化されたバンドルにコンパイルすることに優れた最新のJavaScriptモジュールバンドラーです。オールインワンのバンドラーとは異なり、ロールアップは主にJavaScriptに焦点を当てており、速度とカスタマイズの利点を提供します。その主要な機能とそれを効果的に使用する方法を調べてみましょう。

rollup.jsを使用することの利点：

簡略化された開発：小規模で自己完結型のソースファイルを管理すると、開発ワークフローが大幅に改善されます。
強化されたコード品質：ビルドプロセス中にリナー、フォーマッタ、および構文チェッカーとシームレスに統合します。
インテリジェントに未使用のコードを削除して、バンドルが小さく速くなります。後方互換性：
柔軟な出力：さまざまなプロジェクトのニーズに合わせて複数の出力形式（ES5、ES6モジュール、CommonJS）を生成します。
パフォーマンス：一般に、他のバンドラーよりも高速でカスタマイズ可能、特に複雑な構成を使用します。
インストール：

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 build npx rollupロールアップの機能を説明するために、基本的なデジタル時計の例を作成しましょう。 Githubからサンプルファイルをダウンロードするか、手動で作成できます。

src/main.js：（メインエントリポイント）

src/lib/dom.js：（domユーティリティライブラリ）

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);
}

ログイン後にコピー

src/lib/time.js：（時間のフォーマット関数）

export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

ログイン後にコピー

index.html：（html to clockを表示する）

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>

ログイン後にコピー

これは

を作成します。未使用関数はツリーシェーキングによって削除されることに注意してください。 は、このバンドルされたファイルを参照しています。

key rollup.js構成オプション：

--fileまたは-o：出力ファイル名を指定します。
--formatまたは-f：出力形式を定義します（iife、es、cjs、umd、amd、system）。
--sourcemap：デバッグを簡単にするためのソースマップを生成します（インラインソースマップに--sourcemap inlineを使用）。
または--watch：ファイルの変更を時計と自動的に再構築します。-w
または--config：構成ファイル（例えば、-c）を使用します rollup.config.js

configuration file（rollup.config.js）：

構成ファイルにより、複数のオプションとプラグインの管理が簡素化されます。例を次に示します：

with：

npm install rollup --global

ログイン後にコピー

で実行します npx rollup --config

プラグイン：

Rollupの拡張性は、プラグインシステムから拡張されます。一般的なプラグインは次のとおりです

：node.jsモジュールの解像度を処理します。

@rollup/plugin-node-resolve：commonjsモジュールをESモジュールに変換します。
@rollup/plugin-commonjs：ビルドプロセス中にコードのトークンを置き換えます。
@rollup/plugin-replace：ES5にES6コードを導入します（最新のブラウザサポートの代替案を検討してください）。
：出力コードを模倣します。@rollup/plugin-buble
rollup-plugin-terserを使用してプラグインをインストールすることを忘れないでください。それらを

内に

配列に含めます npm install <plugin-name> --save-dev</plugin-name>plugins高度なテクニック：rollup.config.js

環境変数：

環境変数（例えば、

複数のバンドル：ロールアップを構成して、異なるエントリポイントから複数のバンドルを生成します。 NODE_ENV
コードをオンデマンドでロードされた小さなチャンクに分割することにより、アプリケーションをさらに最適化します。 rollup.jsは、JavaScriptモジュールをバンドルするための強力で柔軟な方法を提供します。コア機能とプラグインエコシステムを理解することにより、高度に最適化され、保守可能なJavaScriptアプリケーションを作成できます。最新の情報と包括的なプラグインのリストについては、公式のrollup.jsドキュメントを参照してください。

以上がRollup.js JavaScript Bundlerの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。