Node.js とブラウザーの間でコードを共有するにはどうすればよいですか?

フルスタック アプリケーションのバックエンドとフロントエンドの間でコードを共有することは、困難な作業になる可能性があります。ただし、保守可能でスケーラブルなアプリケーションを構築するには不可欠です。コードを共有することで、コードの重複を回避し、開発時間を短縮し、アプリケーション間の一貫性を維持します。

このチュートリアルでは、Node.js とブラウザーの間でコードを共有するためのさまざまな手法を検討し、プロジェクトに最適な方法を選択する方法を学びます。

Node.js とブラウザーの間でコードを共有するためのテクニック

ユーザーは次のように、node.js とブラウザーの間でコードを共有できます -

共通JSモジュール

CommonJS モジュールは、Node.js でコードを整理および共有するために広く使用されている簡単な方法です。多くの Node.js パッケージは、使いやすい CommonJS モジュールを使用して構築されています。

ただし、デフォルトではブラウザでは機能しません。ブラウザーで CommonJS モジュールを使用するには、Browserify や Webpack などのツールを使用する必要があります。これらのツールは、Node.js およびブラウザーで実行できる単一の JavaScript ファイルを作成できます。ターゲット環境に応じて、コードを CommonJS から ES モジュールに、またはその逆に変換することもできます。

Node.js アプリケーションを構築していて、サーバー側のコードをブラウザーで再利用したい場合は、CommonJS モジュールが適しています。

ESモジュール

ES モジュールは、Web ブラウザーと Node.js でコードを整理および共有するための最新のネイティブな方法です。使い方は簡単で、React や Vue.js などの多くの最新のフロントエンド フレームワークは、すぐに ES モジュールをサポートします

npm や Yarn などのパッケージ マネージャーを使用して、Node.js とブラウザーの間でコードを共有できます。コードをパッケージとして公開し、パッケージ マネージャーを使用して両方の環境にインストールできます。

最新の標準化された方法を使用して、アプリケーションのバックエンドとフロントエンドの間でコードを整理および共有したい場合は、ES モジュールが良い選択です。

ユニバーサルJavaScript

ユニバーサル JavaScript (同型 JavaScript とも呼ばれます) を使用すると、サーバーとクライアントの両方で実行されるコードを作成できます。これにより、パフォーマンスが向上し、ページの読み込み時間が短縮され、SEO が強化されます。

ユニバーサル JavaScript は事前に多くの構成を必要とし、セットアップが複雑になる場合があります。さらに、一部のライブラリと API はサーバーとクライアントで異なる動作をし、予期しないエラーが発生する可能性があります。

これは、サーバー側レンダリングを使用して高性能でスケーラブルなアプリケーションを構築する必要があり、バックエンドとフロントエンド間でできるだけ多くのコードを共有したい場合に良い選択です。

これら 3 つの方法を理解することで、ユーザーはプロジェクトの要件と開発の好みに最も適した方法を選択できます。

Webpack を使用して Node.js コードをブラウザーと共有する

Webpack などのビルド ツールは、Node.js とブラウザーの間でコードを共有する強力な方法です。ユーザーは次の手順に従って、Webpack -

を使用して Node.js とブラウザーの間でコードを共有できます。

ステップ 1 - まず、Webpack をコンピューターにインストールする必要があります。

リーリー

ステップ 2 - 次に、コードをバンドルする方法を指定する Webpack 構成ファイルを作成する必要があります。ファイルの簡単な例を次に示します:

リーリー

ステップ 3 - その後、Node.js またはブラウザーで通常行うのと同じようにコードを作成できます。

ステップ 4 - 次に、次のコマンドを使用してコードをバンドルする必要があります -

リーリー

ステップ 5 - 最後に、バンドルを HTML ファイルに含めるか、Node.js コードで要求することで、Node.js またはブラウザ アプリケーションでバンドルを使用できます。

たとえば、ステップ 2 のデフォルト構成を使用する場合、次のように HTML ファイルにパッケージを含めることができます -

リーリー ＃＃＃例＃＃＃

この例では、一般的な JavaScript メソッドを使用して Node.js およびブラウザーの関数を定義およびエクスポートする方法を示します。 myLibrary.js ファイルでは、Node.js およびブラウザ環境で使用できる 2 つの関数greet() と Goodbye() を定義します。このコードは、モジュールが存在するかどうかを確認し、Node.js の関数をブラウザーのウィンドウ オブジェクトにエクスポートしながらエクスポートします。

index.js ファイルでは、require() 関数を使用して myLibrary.js モジュールをインポートし、パラメータを使用してエクスポートされた関数 Goodbye() を呼び出します。

index.html ファイルには、myLibrary.js ファイルをスクリプト タグとして含め、そのスクリプト タグを使用して、パラメータを指定してエクスポートされた関数greet() を呼び出します。

このようにして、Node.js およびブラウザー環境で使用できる共通で再利用可能なコード ベースを作成でき、コードは各環境で正しく実行されます。

myLibrary.js

リーリー

index.js

リーリー

index.html

リーリー ＃＃＃出力＃＃＃

このチュートリアルでは、ユーザーは、Node.js とブラウザーの間でコードを共有するためのさまざまなテクニック (CommonJS モジュール、ES モジュール、ユニバーサル JavaScript など) を学習しました。各方法には長所と短所があり、選択はプロジェクトの要件と開発の好みによって異なります。

このチュートリアルで説明されている手順に従って、ユーザーはコードをバンドルする方法を指定する Webpack 構成ファイルを作成し、Node.js またはブラウザーで通常行うのと同じようにコードを作成できます。また、一般的な JavaScript メソッドを使用して、Node.js およびブラウザー用にエクスポートされた関数を定義する方法の例も見ました。

以上がNode.js とブラウザーの間でコードを共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。