web-dev-qa-db-ja.com

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

だから、私はnode/express + jadeコンボでアプリケーションを書いています。

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

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

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

リンクをWebページのヘッダーに配置しているので、これらの他のJSファイルも実行時にクライアントにロードされます。したがって、クライアントはこれらの他のファイルからエクスポートされるすべての機能を知っています。

サーバーへのソケットを開くメインのmessages.jsファイル内のこれらの他のJSファイル（client.jsなど）からこれらの関数を呼び出す方法を教えてください。

javascriptnode.jssocketsexpresspug
236
MightyMouse

これは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とComponent の私の比較についてもっと読むことができます。

_ amd _ の実装には以下が含まれます。

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

どちらを選択するかを検索する際には、 Bower について読んでください。 Bowerはパッケージの依存関係のためだけのもので、CommonJSやAMDのようなモジュール定義には無関心です。

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

356
JP Richardson

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

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

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

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

'module.js'では、 エクスポート関数/ class をインポートする必要があります。

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

ここでの例 。

11
Kamil Kiełczewski

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

プロジェクトはCommonJを必要とせず、ES3互換性（モジュールはサポートされない）を持たなければならないため、必要なのはremove allexportandimportあなたのコードからのステートメント、あなたの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();
1
ydanila

これを使ってもうまくいきませんが、一番良い解決策はbrowserifyです：

-common.js-
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();
0
Wael Chorfan

私は電子環境から来ています、そこで私はレンダラープロセスとメインプロセスの間のIPCコミュニケーションが必要です。レンダラプロセスはスクリプトタグの間のHTMLファイルに配置され、同じエラーを生成します。この線

const {ipcRenderer} = require('electron')

スローされていない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
    }
})}

これで問題は解決しました。解決策が提案された ここ 。これが他の人に役立つことを願っています。乾杯。

0
Kibonge Murphy