NPMパッケージをブラウザ対応のJavaScriptスクリプトにコンパイルします

クズども · 掲載地 2024/04/25 20:28:21

要件:Fetch Event SourceはMicrosoftが実装したSSEストリーミングで、NPMパッケージを使用して構築され、ブラウザ上で直接使用することはできません。また、NPMパッケージをブラウザで実行されるJavaScriptスクリプトにコンパイルする必要があります。

NPMはNode API標準に基づいて実装されたNodeパッケージ管理ツールであり、JavaScriptはECMAScript標準に基づくブラウザ上で動作するスクリプト言語です。異なる標準のため、NPMパッケージはブラウザ上で直接実行できません。

よく使われる梱包ツール:

Webpack:Webpackは最も人気のあるフロントエンドパッケージングツールの一つで、JavaScript、スタイルシート、画像、その他のリソースを扱い、モジュール開発もサポートします。
Parcel:Parcelは依存関係を自動的に処理しプロジェクトをパッケージ化するゼロ設定のパッケージングツールで、プロジェクトの迅速な構築に最適です。
Rollup:RollupはJavaScriptライブラリのパッケージ化に注力しており、複数のモジュールを1つのファイルにパッケージ化でき、Tree Shakingの最適化をサポートしています。
Browserify:Browserifyはブラウザ上でNode.jsのモジュールシステムを使用でき、CommonJSモジュールをブラウザ認識可能なコードにパッケージ化できます。
Grunt:Gruntは、パッケージ化、圧縮、マージ、コードパッケージングなどの操作を行うタスク自動化ツールです。
Gulp:Gruntと同様に、Gulpはタスク自動化ツールですが、コードよりも設定を重ねてタスク定義をより簡潔かつ明確にしています。
Brunch:BrunchはJavaScript、CSS、HTMLなどのファイルを処理できる高速で簡単なフロントエンドパッケージングツールで、プラグイン拡張機能もサポートしています。

この記事には2つのツールが必要です:ブラウザ化、ミニファイ(JS、CSS、HTML、IMGファイル用のコンプレッサー)

まず、新しいフォルダを作成し、以下のコマンドでNodeプロジェクトを素早く初期化します。

ログインが見えます。

改めるpackage.json文書は次のように記されています。

ログインが見えます。

ブラウザーify、minify、fetch-event-sourceをインストールすると、コマンドは以下の通りです:

ログインが見えます。

コンパイルコマンドを実行します:

ログインが見えます。

ここで: -r はコンパイルされる npm パッケージ名を指定します。-s コードで使われるモジュール名(自分の習慣に応じたカスタム名)

実行が完了すると、event.min.jsは以下の図のように圧縮ファイルとなります。

event.min.jsコンテンツをブラウザコンソールにコピーしてテストしてください。下の画像に示されています。

(終わり)

NPMパッケージをブラウザ対応のJavaScriptスクリプトにコンパイルします

関連記事

閲覧したセクション