1. ホーム
  2. javascript

[解決済み] Node.js上のクライアント。Uncaught ReferenceError: require は定義されていません。

2022-03-20 03:53:23

質問

Node.js、Express.js、およびMySQLを使用したアプリケーションを作成しています。 ジェイド の組み合わせになります。

私は、ファイル client.js これは、クライアントで読み込まれます。このファイルには、他のJavaScriptファイルから関数を呼び出すコードがあります。私の試みは

var m = require('./messages');

の内容を読み込むために messages.js (サーバー側でやっているのと同じように) 後でそのファイルから関数を呼び出すことができます。しかし require はクライアント側で定義されていないため、次のようなエラーが発生します。 Uncaught ReferenceError: require is not defined .

ウェブページのヘッダーにリンクを貼っているので、これらの他のJavaScriptファイルもクライアントで実行時に読み込まれます。つまり、クライアントはこれらの他のファイルからエクスポートされた関数をすべて知っているわけです。

これらの関数を他のJavaScriptファイルから呼び出すには ( messages.js ) の中で、メインの client.js ファイルで、サーバーへのソケットをオープンしていますか?

解決方法は?

これは require() は、ブラウザ/クライアントサイドのJavaScriptには存在しません。

さて、クライアントサイドのJavaScriptのスクリプト管理について、いくつか選択する必要がありそうです。

選択肢は3つあります。

  1. を使用します。 <script> タグを使用します。
  2. を使用します。 共通JS の実装があります。Node.jsのような同期的な依存関係を持つ
  3. を使用します。 非同期モジュール定義 (AMD)の実装です。

コモンJS クライアントサイドの実装も含まれます (それらのほとんどは、デプロイ前にビルドステップを必要とします)。

  1. ブラウザ化 - ほとんどのNode.jsモジュールをブラウザで使用することができます。これは個人的にお気に入りです。
  2. ウェブパック - 何でもできる(JavaScriptのコード、CSSなどをバンドルする)。Reactの急増で普及したが、学習が難しいことで有名。
  3. ロールアップ - は新しい候補です。ES6モジュールを活用し、ツリーシェイク機能(未使用のコードを削除する機能)を備えています。

の比較について、詳しくはこちらをご覧ください。 Browserifyと(非推奨)Componentの比較 .

AMD の実装が含まれます。

  1. RequireJS - クライアントサイドのJavaScript開発者の間で非常に人気があります。非同期であるため、私の趣味ではありません。

なお、どれにするかを選ぶための検索では、以下のようなことが書かれています。 バウワー . Bowerはパッケージの依存関係のみを扱うもので、CommonJSやAMDのようなモジュール定義には無関心です。