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

Clock

ホームページ

ウェブフロントエンド

jsチュートリアル

Rollup.js JavaScript Bundlerの紹介

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

Feb 10, 2025 pm 04:01 PM

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 id="Clock">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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles

Rollup.js JavaScript Bundlerの紹介

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック