設定不要のWebアプリケーションバンドラーであるParcel.jsの概要

設定不要のWebアプリケーションバンドラーであるParcel.jsの概要

設定不要のWebアプリケーションバンドラーであるParcel.jsの概要
СОДЕРЖАНИЕ
02 июня 2020

この投稿は、自己宣言したParcel.jsの紹介です。 "非常に高速なゼロ構成Webアプリケーションバンドル." これを始めるために知っておく必要のあるすべてを次に示します。


多くのフロントエンド開発者は、今日のWebアプリの構築に伴う複雑さの一部に不満を感じています。フロントエンドワークフローにある種のビルドまたはバンドルツールを含めることはかなり標準的な方法であるため、多くの開発者がWebpackなどのフロントエンドツールの使用を検討しています.

Webpack は最も人気のあるバンドラーであり、Require.js、Rollup、および類似のソリューションに続くものです。しかし、webpackなどのツールの学習曲線は急です。構成が複雑なため、webpackを使い始めるのは簡単ではありません。その結果、近年、別のソリューションが登場しました。このツールは必ずしもフロントランナーではありませんが、フロントエンドモジュールのバンドラーランドスケープで、より簡単にダイジェスト化できます。 Parcel.jsの紹介.

Parcel.jsの概要

Parcel.js(parceljs.org)は、多くの初心者から中級者の開発者が望んでいるものです:すぐに立ち上げて実行できるシンプルで構成の少ないバンドル.

このパーセルチュートリアルがこのツールのわかりやすい紹介になることを願っています。基本を説明してから、Parcelを使用してBabelとSassを組み込んだシンプルなWebアプリをバンドルする方法を説明します.

contents目次:

  1. なぜWeb App Bundleを使用するのですか? #
  2. Parcel.jsのインストール#
  3. ファイルエントリポイントを作成する#
  4. dist /フォルダー#
  5. Parcel.jsをBabelで使用する#
  6. SassでParcel.jsを使用する#
  7. Parcelを使用した複数のスクリプトのバンドル#
  8. Parcel.jsを使用したコード分割#
  9. Parcel.jsを使用した本番ビルド#
  10. 小包を使用することの欠点はありますか? #

Parcel.js Webサイト

Web App Bundleを使用する理由?

Parcel.jsなどのApp Bundleを使用する理由については、あまり取り上げないので、そのトピックについては以前から取り上げています。ただし、このようなツールを使用するメリットの基本的な概要は次のとおりです。

  • スクリプトまたはスタイルシートが組み合わされているため、アプリのHTTPリクエストは少なくなります
  • スクリプトとスタイルシートをオンデマンドでロードできるため、パフォーマンスがさらに向上します
  • スクリプトとスタイルシートを自動的に縮小して、ユーザーに提供するキロバイトを少なくすることができます
  • バンドルと縮小の作業はツールによって自動的に行われ、手作業を最小限に抑えます
  • 開発ファイルはモジュール化されて整理されているため、コードの保守とデバッグがはるかに簡単です

ご覧のとおり、メリットは多く、主にパフォーマンスとプロジェクトのメンテナンスに関連しています。まだ検討していない場合は、バンドラーを使用する理由がたくさんあります。.

これで、Parcel.jsを起動して実行するための基本から始めましょう。このチュートリアルの機能について、簡単に理解できるいくつかの簡単な例を使用してゆっくりと説明します.

Parcel.jsのインストール

Yarnまたはnpmを使用して、Parcel.jsを端末にインストールできます。このチュートリアルでは、npmを使用します。これをグローバルにインストールして、どのプロジェクトでも使用できるようにするコマンドを次に示します。

npm install parcel-bundler -g

-gフラグはそれをグローバルにインストールします。単一のプロジェクトにのみインストールして、package.jsonのプロジェクトのdevDependenciesに追加する場合は、-gの代わりに–save-devフラグを使用して、プロジェクトのルートフォルダー内で同じコマンドを実行できます。

npm install parcel-bundler –save-dev

グローバルインストール(これが最も一般的なユースケースになります)では、initコマンドを使用して任意のプロジェクトを開始できます。ターミナルを使用して、アプリケーションのルートとして使用するフォルダーに移動し、実行します。

npm init -y

-yフラグは、セットアップのデフォルトを使用して、npmが質問しないようにします。私のプロジェクトがparcel-demoと呼ばれているとすると、ルートにpackage.jsonファイルが次のように作成されます。

{
"名前": "小包デモ",
"バージョン": "1.0.0",
"解説": "",
"メイン": "index.js",
"スクリプト":{
"テスト": "エコー \"エラー:テストが指定されていません\" && 1番出口"
},
"キーワード":[],
"著者": "",
"ライセンス": "ISC"
}

npmに慣れていないために上記のいずれかがわかりにくい場合は、私の包括的な npmのチュートリアル. フロントエンドWeb開発者がツールを理解するのを支援することに焦点を当てています.

ファイルエントリポイントの作成

基本的なプロジェクトの設定では、index.jsと呼ばれるプライマリJavaScriptファイル(package.jsonファイルに示されている)を指すindex.htmlファイルでParcel.jsを使用します。このHTMLファイルは、パーセルのエントリポイントとして機能します。私のHTMLファイルには、JavaScriptファイルを指すスクリプト要素があるため、次のようになります。

html>
<html>
<頭>
<題名>小包のデモタイトル>
頭>
<体>
<スクリプトsrc ="./js/index.js">脚本>
体>
html>

適切なHTMLファイルとJavaScriptファイルを配置したら、プロジェクトのフォルダー内のターミナルで次のコマンドを実行して、Parcelの組み込み開発サーバーを起動できます。

区画インデックス.html

これにより、サーバーが起動し、エントリポイントとして使用するファイルが通知されます。その結果、ターミナルセッションで次のメッセージが表示されます。

http:// localhost:1234で実行されているサーバー
√887ms内蔵.

ブラウザでhttp:// localhost:1234 /を開いて、これまでに作成したものを表示できます。ライブサーバーはライブリロードと呼ばれるものを使用します ホットモジュールの交換. これにより、ページ全体を更新することなく、ページ上のモジュールが自動的に更新されます。このようにして、作業中にビルドの進行状況をより速く確認できます.

サーバーがアクティブな状態でParcel.jsを実行すると、ファイルを変更するたびに、ファイルが保存されるたびにアプリが自動的に再構築されます。この動作を確認するために、スクリプトに簡単なコンソールログ行を追加します。これにより、端末に次のメッセージが表示されます。

$区画index.html
http:// localhost:1234で実行されているサーバー
√組み込み1.08s.
√組み込み28ms.

「ビルド済み…」の各行は、コンテンツの変更と保存によってトリガーされた1つのビルドを表します.

Parcelの組み込み開発サーバーではなく、自分のサーバーを使用したい場合は、watchコマンドを使用できます。

パーセルウォッチindex.html

ターミナルセッションでも同じ結果が得られます。Parcel.jsがアプリをビルドし、変更を待ちます。

$パーセルウォッチindex.html
√ビルトイン855ms.

dist /フォルダー

監視モードまたは組み込みサーバーを介してParcel.jsを起動すると、プロジェクトのフォルダー内を見ると、次のようなフォルダーとファイル構造が表示されます。

index.html
package.json
js /
└─────index.js
dist /
└─────index.html
└─────js.00a46daa.js
└─────js.00a46daa.js.map

自動的に作成されるdistフォルダーに注意してください。ここに私のプロダクションファイルがあります。これらのファイルには触れません。 Parcelビルドにより、index.jsファイルが、キャッシュに適した一意のバージョン(ファイル名が変更または「変更された」)を持つバージョンに自動的に変換されていることに注意してください。また、ソースマップファイルも追加されます(ソースマップについて読むことができます) この投稿で).

distフォルダー内のindex.htmlファイルを見ると、次のように表示されます。

html>
<html>
<頭>
<題名>小包のデモタイトル>
頭>
<体>

<スクリプトsrc ="/js.00a46daa.js">脚本>
体>
html>

私のindex.htmlファイルのdistバージョンが正しく、便利に.jsファイルのdistバージョンを指していることに注意してください.

Webサイトに同じスクリプトを指す複数のファイル(たとえば、about.html、contact.htmlなど)が含まれている場合、次のコマンドを使用できます。

小包index.html about.html contact.html

これは、ビルドに複数のエントリポイントを使用することをParcelに指示します。次のコマンドを使用して、すべてのHTMLファイルをエントリポイントとして使用するようにParcel.jsに指示することもできます。

小包* .html

Parcel.jsをBabelで使用する

Parcel.jsには、次のようなさまざまなコードトランスパイラーのサポートが組み込まれています。 バベル, 最新の次世代JavaScriptを、すべてのブラウザーが理解できる同等のコードに変換するための一般的なツール。 BabelはParcel.jsに組み込まれているので、それを使用するために特別なプラグインは必要ありません。機能するだけです。例を見てみましょう.

index.jsファイルに次のコードを追加します。

関数getInfo(名前、年= 2018、色= ‘青’){
console.log(名前、年、色);
}

getInfo( ‘Chevy’、1957、 ‘Green’);
getInfo( ‘Benz’、1975);
getInfo( ‘Honda’);

このコードは、ES6機能を使用しています デフォルトのパラメータ, 関数ヘッドで具体的に確認できます。古いブラウザは、関数のデフォルトパラメータをサポートしていません。コードがエラーをスローしないようにするために、すべてのブラウザーで機能する同等のコードにコードを変換するバベルが必要です。 index.jsファイルを保存すると、Parcel.jsによってアプリが再構築され、作成したES6コードの代わりに次のコードが生成されます。

function getInfo(name){
var year = arguments.length > 1 && 引数[1]!==未定義? arguments [1]:2018;
var color = arguments.length > 2 && 引数[2]!==未定義?引数[2]: ‘青’;
console.log(名前、年、色);
}

getInfo( ‘Chevy’、1957、 ‘Green’);
getInfo( ‘Benz’、1975);
getInfo( ‘Honda’);

Babelのオンライン複製を使用して、 これをテストして.

ここで最も重要な要素に注意してください。Babelをインストールまたは構成するために何もしませんでした。これは、Parcelのデフォルト設定の一部としてすぐに使用できます!もちろん、いくつかの構成オプションを追加して、Babelを変更して必要な処理を実行することもできます。その場合は、構成設定を含めて、プロジェクトのルートフォルダーに.babelrcファイルを追加できます。あなたはについてもっと読むことができます .babelrcファイルの使用 Parcel.js Webサイト.

SassでParcel.jsを使用する

Babelと同様に、ParcelもデフォルトでSCSS(Sass)ファイルを有効なCSSに自動的にコンパイルします。これを示すために、サンプルプロジェクトのルートに「css」というフォルダを追加します。そのフォルダーに、次のSassコードを含むstyle.scssファイルを追加します。

体 {
色:黒;

.モジュール{
赤色;
}
}

Sassのセレクターのネスト機能を使用しています。 HTMLファイルのセクションに次の行を追加します。

<リンクrel ="スタイルシート" href ="./css/style.scss">

すべてのファイルが保存されると、ParcelはSCSSを以下に変換したコンパイル済みCSSファイルを使用して、dist /フォルダーに新しいビルドを作成します。

体 {
色:黒;
}
body .module {
赤色;
}

システムにSassをグローバルにインストールしている限り、Parcelはこれを自動的に実行します。構成は必要ありません。 Sassをグローバルにインストールしていなくても問題ありません。 SCSSを記述してParcelを起動するだけで、Parcelはプロジェクト固有の依存関係としてSassを自動的にインストールします。とても便利!また、設定が不要なため、これは特に便利です。.

そして、Babelと同じように、Sassに付属しているデフォルトの構成オプションを選択することができます。または、プロジェクトのルートに.sassrcファイルを作成して、 私自身の構成.

Parcelを使用した複数のスクリプトのバンドル

これまでに示した例は、Parcelを起動して実行するためのものであり、Parcelがどのように機能するかについての基本的なアイデアを得ることができます。前述のように、どのバンドラーの力も、複数のファイルを単一のファイルに自動的に結合する機能です。これにより、HTTPリクエストが減少し、Webサイトまたはアプリの速度が向上します。.

これまでに説明したことはすべて、ES6のモジュール機能を使用して取り込まれた複数のスクリプトを使用して実行できます。これにより、モジュール方式でスクリプトを作成およびインポートできます。これにより、コードが保守しやすくなり、本番環境では単一のバンドルされたスクリプトのみが提供されます.

これを実証するために、次のJavaScriptを含むmodule.jsと呼ばれる別のファイルを追加します。

エクスポートlet color = ‘green’;

エクスポート関数add(n1、n2){
n1 + n2を返します。
}

これは、変数と関数の2つのオブジェクトをエクスポートするための基本的なコードです。私のindex.jsファイルで、これらのリソースを次のコードでインポートします。

import {color、add} from ‘../js/module.js’;

console.log(color); // "緑"
console.log(add(20、40)); // 60

繰り返しますが、これは基本的なES6モジュールの構文です。これがどのように機能するかについては、ここでは詳しく説明しません。これについての美しい部分は、モジュールを使用していることをHTMLファイルで指定する必要がないという事実です。通常、スクリプトタグは次のようになり、type属性がmoduleに設定されます。

<スクリプトsrc ="./js/index.js" タイプ="モジュール">脚本>

しかし、これは必要ありません。 Parcelはインポートされているモジュールを認識し、2つのスクリプトをパフォーマンスに適した1つのリソースにまとめます。これは、特別な設定やプラグインなしで行われます。そして、前の例と同様に、コードはBabelを使用してES5相当のコードに変換されます。.

Parcel.jsによるコード分割

構成なしで機能するParcelのさらに別の機能は、 コード分​​割. 場合によっては、すべてのモジュールをすべてのページにロードする必要があります。しかし、他の場合では、特定のコンテキストで、特定のページに特定のモジュールのみをロードしたい場合があります。これは、コード分割によって実行できることです.

先ほど、サンプルプロジェクトには3つのページ(index.html、about.html、contact.html)が含まれていると述べました。 3つのページすべてで同じJavaScriptバンドルを実行したいとしますが、about.htmlページには、特定のものをトリガーするボタンがあります。しかし、私はそのボタンが押されたときにそのコードをロードするだけです.

次に、コード分割機能を使用したコードの外観を示します。

if(document.querySelector( ‘。about’)){
document.querySelector( ‘。about’)。addEventListener( ‘click’、()=> {
import( ‘../ js / about.js’)。then(
document.body.innerHTML + = ‘About Page Updated’;
);
});
}

これには新しいJavaScript機能が組み込まれていることに注意してください, 動的インポート import()関数を使用します。これにより、特定のインスタンスで必要なコードを動的にロードできます。この場合は、Aboutページでボタンが押されたときに行っています。 import()機能はpromiseを返すので、.then()句の中で何でも好きなことができます。これは、インポートされたスクリプトが読み込まれるとトリガーされます。 about.jsスクリプトはオンデマンドで読み込まれ、このコードはバベルによってクロスブラウザES5にトランスパイルされ、あらゆる場所で機能するようになります。バンドルが作成されると、about.js部分がdist /フォルダー内の独自のファイルに配置され、このファイルをオンデマンドでロードできるようになります.

これまでに説明した他の機能と同様に、import()機能は構成なしでParcelで機能します.

Parcel.jsを使用した本番ビルド

これまでは、Parcelに付属し、ライブリロードを含む組み込みサーバーを使用して、すべてのParcelビルドをオンザフライで作成してきました。プロジェクトを保存するたびに、バンドルがビルドされます。しかし、コードは常に進行中の開発のためにバンドルされていました。このようにして、デバッグを行うために必要に応じてソースを表示または検査できます.

プロジェクトが完了してライブサーバーにプッシュする準備ができたら、Parcelがプロジェクトを監視するのを停止できます。端末のCTRL-Cは、多くのプラットフォームでこれを行います。次に、次のコマンドを実行して、1つの最終ビルドを作成するようにParcelに指示します。

パーセルビルドindex.html about.html contact.html

この場合、3つのエントリファイルすべてから構築しています。これが完了すると、Parcelは変更を待機しなくなります。最終的なバンドルが構築され、それだけです。ビルドが完成することに加えて、私のコードはParcelによる本番用に準備されています。 HTML、CSS、JavaScriptはすべて最小化され、パフォーマンスを最適化するために可能な限り最小のファイルを生成します.

小包を使用することの欠点?

パーセルは、ビルドツールの経験がほとんどない、またはまったくない人にとって、間違いなく頼りになる選択肢です。しかし、私自身の調査で、将来改善する必要があると言えるいくつかのことを発見しました.

まず最初に、Parcelはバンドルされたスクリプトとスタイルシートを常にエントリポイントHTMLファイルと同じディレクトリに配置することに気付くでしょう。これは、CSSファイルとJavaScriptファイルが別々のフォルダーにある場合でも発生します。これらは本番ファイルであるため、それほど重要ではない場合があります。しかし、それは心に留めておくべきことです。良いニュースはこれです 修正されたようです 次のParcelバージョン2(まだアルファ版)。そのため、そのバージョンのParcelが安定している場合に、この動作をオーバーライドする方法が必要です(現在の安定バージョンは1.12.4です)。.

もう1つの欠点は、さまざまな機能の構成オプションのカスタマイズに関する情報に関しては、Parcelのドキュメントがかなり少ないことです。 Parcelの大きなメリットの1つは、箱から出してすぐに機能することです。しかし、私はそれをカスタマイズするためのいくつかのより広範なドキュメントが役に立つと思います。たとえば、CSSとJavaScriptの縮小化を維持しながら、ビルドでHTMLの縮小化を無効にするにはどうすればよいですか?ドキュメントにその説明がありません。 GitHubで解決済みの問題を確認したところ、 回避策 (あまり便利ではないと思います).

結論

最後に言及するのは、 アプリを作成, Parcelの構成ファイルを自動的に生成するために使用できます。 JavaScriptライブラリ、トランスパイラー、リンターなどを選択すると、これらはすべてpackage.jsonファイルに追加され、初期化の準備が整います。.

Parcel.jsでアプリを作成する

初心者向けのこのパーセルチュートリアルは以上です。この情報を使用して、Parcelをすばやく起動して実行し、将来のプロジェクトで使用できることを願っています。アプリのバンドルに不慣れな方、またはプロジェクトで試したことがない方は、この導入により、Parcelを試してみるきっかけとなるでしょう。.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウトとプレゼンテーション.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector