Node.js 上的客戶端：未捕獲 ReferenceError：未定義要求

Question

我正在使用 Node.js、Express.js 和Jade組合編寫一個應用程序。

我有文件client.js ，它已加載到客戶端。 在該文件中，我有從其他 JavaScript 文件調用函數的代碼。 我的嘗試是使用

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

為了加載messages.js的內容（就像我在服務器端所做的那樣），然后從該文件調用函數。 但是，客戶端未定義require ，它會拋出Uncaught ReferenceError: require is not defined形式的錯誤。

這些其他 JavaScript 文件也在客戶端運行時加載，因為我將鏈接放在網頁的 header。 所以客戶端知道從這些其他文件導出的所有功能。

如何從打開服務器套接字的主client.js文件中的這些其他 JavaScript 文件（例如messages.js ）調用這些函數？

Answer 1

這是因為require()在瀏覽器/客戶端 JavaScript 中不存在。

現在，您將不得不對客戶端 JavaScript 腳本管理做出一些選擇。

你有三個選擇：

1. 使用<script>標簽。
2. 使用CommonJS實現。 它具有像 Node.js 這樣的同步依賴項
3. 使用異步模塊定義(AMD) 實現。

CommonJS客戶端實現包括（其中大多數在部署之前需要構建步驟）：

1. Browserify - 您可以在瀏覽器中使用大多數 Node.js 模塊。 這是我個人的最愛。
2. Webpack - 做所有事情（捆綁 JavaScript 代碼、CSS 等）。 它因 React 的激增而流行起來，但因其難以學習的曲線而臭名昭著。
3. Rollup - 一個新的競爭者。 它利用 ES6 模塊並包括搖樹功能（刪除未使用的代碼）。

您可以閱讀更多關於我對Browserify 與（已棄用）組件的比較。

AMD實施包括：

1. RequireJS - 在客戶端 JavaScript 開發人員中非常流行。 由於它的異步性質，這不是我的口味。

請注意，在您選擇使用哪一個時，您將閱讀有關Bower的信息。 Bower 僅用於包依賴項，對 CommonJS 和 AMD 等模塊定義沒有意見。

Answer 2

我來自Electron環境，我需要在渲染器進程和主進程之間進行IPC通信。 渲染器進程位於腳本標記之間的 HTML 文件中，並生成相同的錯誤。

線

const {ipcRenderer} = require('electron')

拋出Uncaught ReferenceError: require is not defined

當最初在主進程中創建瀏覽器窗口（嵌入此 HTML 文件的位置）時，我可以通過將 Node.js 集成指定為 true 來解決此問題。

function createAddItemWindow() {

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

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

這為我解決了這個問題。 這里提出了解決方案。

Answer 3

ES6：在 HTML 中，使用屬性type="module"包含主 JavaScript 文件（瀏覽器支持）：

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

在script.js文件中，包含另一個文件，如下所示：

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

在包含的文件 ( module.js ) 中，您必須導出要導入的函數/類：

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

一個工作示例是here 。 更多信息在這里。

Answer 4

用import語句替換所有require語句。 例子：

// Before:
const Web3 = require('web3');

// After:
import Web3 from 'web3';

它對我有用。

Answer 5

這對我有用

1. 從RequireJS 下載頁面獲取最新版本
   這是我們將使用的 RequestJS 文件。
2. 像這樣將它加載到您的 HTML 內容中： <script data-main="your-script.js" src="require.js"></script>
   

筆記！

在your-script.js中使用require(['moudle-name']) ，而不是require('moudle-name')

使用const {ipcRenderer} = require(['electron']) ，而不是const {ipcRenderer} = require('electron')

Answer 6

就我而言，我使用了另一種解決方案。

由於該項目不需要 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();

Answer 7

即使使用它也行不通。 我認為最好的解決方案是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();

Answer 8

window = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

Answer 9

我確定。 我們必須補充：

webPreferences: {
    nodeIntegration: true
}

例如：

mainWindow = new BrowserWindow({webPreferences: {
    nodeIntegration: true
}});

對我來說，問題已經解決了。

Answer 10

人們在問什么是腳本標記方法。 這里是：

<script src='./local.js'></script>. 

或來自網絡：

<script src='https://mycdn.com/myscript.js'></script>

您需要為您的腳本插入正確的 url。

Answer 11

我正在嘗試使用 webpack 構建 metronic。 在我的 package.json 中，我必須刪除"type": "module" 部分。