Rollup.jsはJavaScriptの強力なモジュールバンドラーであり、主にブラウザーのクライアント側JavaScriptをバンドルするために使用されます。すべてのJavaScriptソースファイルを1つのバンドルにコンパイルし、プロジェクトの理解と保守を容易にします。
Contents
重要なポイント
- Rollup.js:JavaScriptのモジュールバンドラー、特にクライアント側で使用します。
- 利点:メンテナンスが容易になり、未使用の機能が自動的に削除され、複数の出力形式がサポートされます。
- 競合:Webpack、Snowpack、Parcelなどのツールとの競合に直面しています。
Rollup.jsを使用する利点
1.開発の簡素化:より小さな自己完結型ファイルでJavaScriptを開発できるため、プロジェクトの管理が容易になります。
2.監視オプション:変更が行われるたびにソースファイルを自動的に再バンドルします。
3.コード検証:リンティング、整形、およびその他の構文チェックを実行します。
4.ツリーシェイキング:未使用の関数を削除し、ファイルサイズを削減し、パフォーマンスを向上させます。
5.複数の出力:ES6モジュール、古いブラウザ用のES5、Node.js用のCommonJSなど、さまざまな出力形式をサポートします。
6.縮小:空白文字とログを削除して、より小さくて高速な運用バンドルを作成できます。
インストールと初期設定
Rollup.jsをグローバルにインストールするには、次を実行します。
「」バッシュ
npm install rollup–global
「」
プロジェクト内のローカルインストールの場合:
「」バッシュ
npm install rollup–save-dev
「」
その後、「npxrollup」を使用してプロジェクト内でコマンドを実行できます。
基本的な使い方
srcサブフォルダーを含むプロジェクトフォルダーを作成し、次のファイルを追加します。
src/a.js:
“`JavaScript
エクスポート関数hello（）{
console.log（’hellofroma.js’）;
}
エクスポート関数Goodbye（）{
console.log（’a.jsからさようなら’）;
}
「」
src/b.js:
“`JavaScript
エクスポート関数hello（）{
console.log（’b.jsからこんにちは’）;
}
エクスポート関数Goodbye（）{
console.log（’b.jsからさようなら’）;
}
「」
src/main.js:
“`JavaScript
import*as a from’./a.js’;
import*as b from’./b.js’;
a.hello（）;
b.さようなら（）;
「」
Rollup.jsを実行して、ソースファイルを単一のES6ファイルにバンドルします。
「」バッシュ
npxロールアップ./src/main.js–file./build/bundle.js–formates
「」
結果のbuild/bundle.jsファイルには以下が含まれます。
“`JavaScript
関数hello（）{
console.log（’hellofroma.js’）;
}
関数さよなら（）{
console.log（’b.jsからさようなら’）;
}
こんにちは（）;
さようなら（）;
「」
高度な機能
Terserを使用して本番バンドルを縮小する
縮小化のためにTerserをインストールします。
「」バッシュ
npm installrollup-plugin-terser–save-dev
「」
「rollup.config.js」を更新します。
“`JavaScript
import{terser}から’rollup-plugin-terser’;
const devMode=（process.env.NODE_ENV===‘開発’）;
デフォルトのエクスポート[
{
入力: ‘./src/main.js’,
出力: {
ファイル: ‘./build/bundle.js’,
形式: ‘es’、
ソースマップ: devMode?‘インライン’:false、
プラグイン: [terser（{ecma:2020,mangle:{toplevel:true},compress:{module:true,toplevel:true,unsafe_arrows:true,drop_console:!devMode,drop_debugger:!devMode},Output:{quote_style:1}}）]
}
}
];
「」
開発ビルドを実行します。
「」バッシュ
npx rollup–config–environmentNODE_ENV:開発
「」
置換プラグインを使用してバンドル時に値を置換する
置換プラグインをインストールします。
「」バッシュ
npm install@rollup/plugin-replace–save-dev
「」
「rollup.config.js」を更新します。
“`JavaScript
「@rollup/plugin-replace」から置換をインポートします。
const devMode=（process.env.NODE_ENV===‘開発’）;
デフォルトのエクスポート[
{
入力: ‘./src/main.js’,
プラグイン: [
交換する（{
値: {
HELLO: 「こんにちは」、
GOODBYE: 「さようなら」
}
}）
]、
出力: {
ファイル: ‘./build/bundle.js’,
形式: ‘es’、
ソースマップ: devMode?‘インライン’:false
}
}
];
「」
開発ビルドを実行します。
「」バッシュ
npx rollup–config–environmentNODE_ENV:開発
「」
npmCommonJSモジュールをインポートする
「node-resolve」と「plugin-commonjs」をインストールします。
「」バッシュ
npm install@rollup/plugin-node-resolve@rollup/plugin-commonjs–save-dev
「」
「rollup.config.js」を更新します。
“`JavaScript
import{nodeResolve}から’@rollup/plugin-node-resolve’;
「@rollup/plugin-commonjs」からcommonjsをインポートします。
const devMode=（process.env.NODE_ENV===‘開発’）;
デフォルトのエクスポート[
{
入力: ‘./src/main.js’,
プラグイン: [
ノード解決（）、
commonjs（）
]、
出力: {
ファイル: ‘./build/bundle.js’,
形式: ‘es’
}
}
];
「」
Lodashをインストールします。
「」バッシュ
npm install lodash–save-dev
「」
スクリプトでLodashを使用します。
“`JavaScript
import*as_from’lodash/string’;
エクスポート関数hello（）{
console.log（_.capitalize（’hellofroma.js’））;
}
「」
開発ビルドを実行します。
「」バッシュ
npx rollup–config–environmentNODE_ENV:開発
「」
Babelを使用してES6をES5にトランスパイルする
Babelと必要なプラグインをインストールします。
「」バッシュ
npm install@rollup/plugin-babel@babel/core@babel/preset-env–save-dev
「」
「rollup.config.js」を更新します。
“`JavaScript
import{getBabelOutputPlugin}から’@rollup/plugin-babel’;
const devMode=（process.env.NODE_ENV===‘開発’）;
デフォルトのエクスポート[
{
ES6
入力: ‘./src/main.js’,
出力: {
ファイル: ‘./build/bundle.js’,
形式: ‘es’
}
}、
{
ES5
入力: ‘./src/main.js’,
プラグイン: [
getBabelOutputPlugin（{
プリセット: [‘@babel/preset-env’]
}）
]、
出力: {
ファイル: ‘./build/bundle-es5.js’,
形式: ‘cjs’
}
}
];
「」
開発ビルドを実行します。
「」バッシュ
npx rollup–config–environmentNODE_ENV:開発
「」
HTMLで両方のスクリプトを参照します。
“`html
「」
結論
Rollup.jsは、最新ブラウザと従来のブラウザの両方のサポートに適した、JavaScriptバンドルのための柔軟で強力なソリューションを提供します。その高度な機能とプラグインにより、開発者は最適化された保守可能なコードバンドルを作成できます。
- 重要なポイント:Rollup.jsは、縮小、モジュール解決、ES6からES5へのトランスパイルなどの高度な機能をサポートしており、JavaScriptバンドル用の多用途ツールとなっています。
- 概要:Rollup.jsは、開発および運用のさまざまなニーズに応えるプラグインと構成オプションを備えた、強力で柔軟なバンドルソリューションを提供します。