Клиент в node: Неподготовлен ReferenceError: require не определен

Итак, я пишу приложение с коммандой node/express + jade.

У меня есть client.js, который загружается на клиенте. В этом файле у меня есть код, который вызывает функции из других файлов JavaScript. Моя попытка состояла в том, чтобы использовать

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

чтобы загрузить содержимое messages.js (как и на стороне сервера), а затем функции вызова из этого файла. Тем не менее, require не определяется на стороне клиента, и он выдает ошибку формы Uncaught ReferenceError: require is not defined.

Эти другие JS файлы также загружаются во время выполнения на клиенте, потому что я размещаю ссылки в заголовке веб-страницы. Таким образом, клиент знает все функции, которые экспортируются из этих других файлов.

Как мне вызвать эти функции из этих других JS файлов (например, messages.js) в основном файле client.js, который открывает сокет на сервер?

Ответы

Ответ 1

Это потому, что require() не существует в JavaScript на стороне браузера/клиента.

Теперь вам нужно будет сделать выбор в отношении управления сценариями JavaScript на стороне клиента.

У вас есть три варианта:

  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 предназначен только для зависимостей пакетов и не определен в определениях модулей, таких как CommonJS и AMD.

Надеюсь, это поможет некоторым.

Ответ 2

Я пришел из электронной среды, где мне нужна связь IPC между процессом рендеринга и основным процессом. Процесс рендеринга располагается в файле HTML между тегами скрипта и генерирует ту же ошибку. Линия

const {ipcRenderer} = require('electron')

выдает Uncaught ReferenceError: требование не определено

Я смог обойти эту проблему, указав для интеграции узла значение true, когда окно браузера (в которое встроен этот HTML файл) было изначально создано в основном процессе.

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

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

Это решило проблему для меня. Решение было предложено здесь. Надеется, что это помогает кому-то еще. Приветствия.

Ответ 3

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";
}

Рабочий пример здесь.

Ответ 4

В моем случае я использовал другое решение.

Поскольку проект не требует CommonJs, и он должен иметь совместимость с ES3 (модули не поддерживаются), все, что вам нужно, это просто удалить все экспортные и импортные инструкции из вашего кода, потому что ваш tsconfig не содержит

"module": "commonjs"

Но используйте операции импорта и экспорта в файлах, на которые вы ссылаетесь

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

Окончательный сгенерированный код всегда будет иметь (по крайней мере, для машинописного текста 3.0) такие строки

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

Ответ 5

Даже использование этого не сработает, я думаю, что лучшее решение - 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();

Ответ 6

Это сработало для меня

  1. сохранить этот файл require.js
  2. загрузить в свой HTML, как это
    <script data-main="your-Scrpt.js" src="require.js"></script>
    Внимание!
     используйте: → require (['moudle-name']) в "your-script.js"
     не требуется ('имя-имя')
    const{ipcRenderer} = требуется (['электрон'])
    Не: const {ipcRenderer} = требуется ("электрон")