☰

ブラウザ: キャッチされない参照エラー: require が定義されていません 質問する

tag-icon • tag-icon javascript
ブラウザ: キャッチされない参照エラー: require が定義されていません 質問する

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

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

の内容をロードしmessages.js(サーバー側で行うのと同じように)、後でそのファイルから関数を呼び出すためです。ただし、 はrequireクライアント側で定義されていないため、 という形式のエラーがスローされますUncaught ReferenceError: require is not defined。

リンクを Web ページのヘッダーに配置しているため、これらの他の JavaScript ファイルもクライアントで実行時に読み込まれます。そのため、クライアントはこれらの他のファイルからエクスポートされるすべての関数を認識します。

サーバーへのソケットを開くmessages.jsメイン ファイル内の他の JavaScript ファイル (など) からこれらの関数を呼び出すにはどうすればよいでしょうか?client.js

ベストアンサー1

require()これは、ブラウザ/クライアント側の JavaScript に存在しないためです。

ここで、クライアント側の JavaScript スクリプト管理についていくつかの選択を行う必要があります。

次の 3 つのオプションがあります。

  1. タグを使用してください<script>。
  2. 使うコモンJS実装。Node.jsのような同期依存関係がある
  3. 使用非同期モジュール定義(AMD) 実装。

CommonJSクライアント側の実装には次のものが含まれます (そのほとんどは、デプロイする前にビルド手順が必要です)。

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

私の比較の詳細については、Browserify と (非推奨の) コンポーネント。

AMD実装には以下が含まれます。

  1. JS が必要- クライアントサイド JavaScript 開発者の間で非常に人気があります。非同期の性質があるため、私の好みではありません。

どちらを選ぶかを選択する際には、次の点についてお読みください。バウアーBower はパッケージ依存関係のみを対象としており、CommonJS や AMD などのモジュール定義については特にこだわりはありません。

おすすめ記事