ホームページ >ウェブフロントエンド >jsチュートリアル >Rollup.js JavaScript Bundlerの紹介
Rollup.js JavaScript Bundlerの紹介
- 尊渡假赌尊渡假赌尊渡假赌オリジナル
- 2025-02-10 16:01:10651ブラウズ
rollup.js：次世代のJavaScriptモジュールBundler
rollup.jsは、複数のソースファイルを単一の最適化されたバンドルにコンパイルすることに優れた最新のJavaScriptモジュールバンドラーです。 オールインワンのバンドラーとは異なり、ロールアップは主にJavaScriptに焦点を当てており、速度とカスタマイズの利点を提供します。 その主要な機能とそれを効果的に使用する方法を調べてみましょう。
rollup.jsを使用することの利点：
- 簡略化された開発：小規模で自己完結型のソースファイルを管理すると、開発ワークフローが大幅に改善されます。
- 強化されたコード品質：ビルドプロセス中にリナー、フォーマッタ、および構文チェッカーとシームレスに統合します。 ツリーシェーキングの最適化：
- インテリジェントに未使用のコードを削除して、バンドルが小さく速くなります。 後方互換性： Transpiles Modern JavaScript（ES6）からES5から、より広範なブラウザのサポートを確保します。
- 柔軟な出力：さまざまなプロジェクトのニーズに合わせて複数の出力形式（ES5、ES6モジュール、CommonJS）を生成します。
- パフォーマンス：一般に、他のバンドラーよりも高速でカスタマイズ可能、特に複雑な構成を使用します。
- インストール： rollup.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 build
npx rollupロールアップの機能を説明するために、基本的なデジタル時計の例を作成しましょう。 Githubからサンプルファイルをダウンロードするか、手動で作成できます。
src/main.js：（メインエントリポイント）
- src/lib/dom.js：（domユーティリティライブラリ）
<code class="language-javascript">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>
- src/lib/time.js：（時間のフォーマット関数）
<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>
- index.html：（html to clockを表示する）
<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>これは
を作成します。 未使用関数はツリーシェーキングによって削除されることに注意してください。 は、このバンドルされたファイルを参照しています。
key rollup.js構成オプション：
-
--fileまたは-o：出力ファイル名を指定します。 -
--formatまたは-f：出力形式を定義します（iife、es、cjs、umd、amd、system）。 ）。
-
--sourcemap：デバッグを簡単にするためのソースマップを生成します（インラインソースマップに--sourcemap inlineを使用）。 - または
--watch：ファイルの変更を時計と自動的に再構築します。-w - または
--config：構成ファイル（例えば、-c）を使用しますrollup.config.js
構成ファイルにより、複数のオプションとプラグインの管理が簡素化されます。 例を次に示します：
with：
<code class="language-bash">npm install rollup --global</code>
で実行します
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 サイトの他の関連記事を参照してください。