ノード上のクライアント：キャッチされていないReferenceError：requireが定義されていません

したがって、私はnode / express + jadeコンボを使用したアプリケーションを作成しています。

私が持っているclient.jsクライアントにロードされています、。そのファイルには、他のJavaScriptファイルから関数を呼び出すコードがあります。私の試みは使用することでした

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

messages.js（サーバー側で行うのと同じように）のコンテンツをロードし、後でそのファイルから関数を呼び出します。ただし、requireクライアント側では定義されておらず、フォームのエラーをスローしますUncaught ReferenceError: require is not defined。

これらの他のJSファイルも、リンクをWebページのヘッダーに配置するため、ランタイムでクライアントに読み込まれます。したがって、クライアントはこれらの他のファイルからエクスポートされるすべての関数を知っています。

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

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

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

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

1. <script>タグを使用します。
2. CommonJS実装を使用します。Node.jsのような同期依存関係
3. AMD実装を使用します。

CommonJSクライアント側の実装には次のものがあります。

（それらのほとんどは、デプロイする前にビルド手順が必要です）

1. Browserify-ほとんどのNode.jsモジュールをブラウザーで使用できます。これは私の個人的なお気に入りです。
2. Webpack-すべてを実行します（JS、CSSなどをバンドル）。React.jsの急増により人気を博しました。難しい学習曲線で有名です。
3. ロールアップ -新しい候補。ES6モジュールを活用します。ツリーを揺さぶる機能が含まれています（未使用のコードを削除します）。

Browserifyと（非推奨）コンポーネントの比較については、こちらをご覧ください。

AMDの実装には次のものがあります。

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

どちらを使用するかを選択する検索では、Bowerについて読むことに注意してください。Bowerはパッケージの依存関係のみを対象としており、CommonJSやAMDのようなモジュール定義には当てはまりません。

これが一部に役立つことを願っています。

私はレンダラープロセスとメインプロセス間のIPC通信が必要な電子環境から来ています。レンダラープロセスは、スクリプトタグの間のHTMLファイルにあり、同じエラーを生成します。この線

const {ipcRenderer} = require('electron')

Uncaught ReferenceErrorをスローします：requireが定義されていません

ブラウザウィンドウ（このHTMLファイルが埋め込まれている場所）がメインプロセスで最初に作成されたときに、ノード統合をtrueとして指定することで、この問題を回避できました。

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

これで問題は解決しました。解決策はここに提案されました。これが他の誰かを助けることを願っています。乾杯。

ES6： htmlに属性を使用してメインのjsファイルを含めますtype="module"（ブラウザサポート）：

<script type="module" src="script.js"></script>

そしてscript.jsファイルにそのような別のファイルを含めます：

import { hello } from './module.js';
...
// alert(hello());

インクルードファイル（module.js）内で、インポートする関数/クラスをエクスポートする必要があります

export function hello() {
    return "Hello World";
}

ここでの作業例。

私の場合、別のソリューションを使用しました。

プロジェクトはCommonJsを必要とせず、ES3互換性（モジュールはサポートされていません）を備えている必要があるため、tsconfigにコードが含まれていないため、コードからすべてのエクスポートおよびインポートステートメントを削除するだけです。

"module": "commonjs"

ただし、参照ファイルでインポートおよびエクスポートステートメントを使用する

import { Utils } from "./utils"
export interface Actions {}

最終的に生成されたコードには常に（少なくともtypescript 3.0の場合）そのような行があります

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

これを使用しても機能しませんが、最良の解決策はbrowserifyです。

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

これは私のために働いた

1. このファイルを保存してくださいhttps://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. このようにHTMLにロードします
   <script data-main="your-Scrpt.js" src="require.js"></script>
   。
   使用：-> require（['moudle-name']）in "your-script.js"
   必要ありません（ 'moudle-name'）
   const {ipcRenderer} = require（['electron']）
   Not：const {ipcRenderer} = require（ 'electron'）