[解決済み] Node.js上のクライアント。Uncaught ReferenceError: require は定義されていません。
質問
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つあります。
-
を使用します。
<script>
タグを使用します。 - を使用します。 共通JS の実装があります。Node.jsのような同期的な依存関係を持つ
- を使用します。 非同期モジュール定義 (AMD)の実装です。
コモンJS クライアントサイドの実装も含まれます (それらのほとんどは、デプロイ前にビルドステップを必要とします)。
- ブラウザ化 - ほとんどのNode.jsモジュールをブラウザで使用することができます。これは個人的にお気に入りです。
- ウェブパック - 何でもできる(JavaScriptのコード、CSSなどをバンドルする)。Reactの急増で普及したが、学習が難しいことで有名。
- ロールアップ - は新しい候補です。ES6モジュールを活用し、ツリーシェイク機能(未使用のコードを削除する機能)を備えています。
の比較について、詳しくはこちらをご覧ください。 Browserifyと(非推奨)Componentの比較 .
AMD の実装が含まれます。
- RequireJS - クライアントサイドのJavaScript開発者の間で非常に人気があります。非同期であるため、私の趣味ではありません。
なお、どれにするかを選ぶための検索では、以下のようなことが書かれています。 バウワー . Bowerはパッケージの依存関係のみを扱うもので、CommonJSやAMDのようなモジュール定義には無関心です。
関連
-
[解決済み] Node.jsで「btoaが定義されていない」エラーが発生する
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Node.jsで「ReferenceError: primordials is not defined」を修正する方法
-
[解決済み] JavaScriptの "require "とは何ですか?
-
[解決済み] Node.jsでファイルを自動で再読み込みするには?
-
[解決済み] webpackでjQueryプラグインの依存関係を管理する
-
[解決済み] node.js require()キャッシュ - 無効化可能か?
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み】Node.jsとブラウザ間でコードを共有するにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSアレイループと効率解析の比較
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。