it-swarm.com.ru

Клиент на узле: Uncaught ReferenceError: требование не определено

Итак, я пишу приложение с комбинированным узлом/экспресс + Джейд.

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

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

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

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

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

221
MightyMouse

Это потому, что 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 vs Component

AMD реализации включают в себя:

  1. RequireJS - Очень популярен среди разработчиков JavaScript на стороне клиента. Не мой вкус из-за его асинхронного характера.

Обратите внимание, что в своем поиске по выбору того, с кем вы пойдете, вы узнаете о Bower . Bower предназначен только для зависимостей пакетов и не определен в определениях модулей, таких как CommonJS и AMD. 

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

338
JP Richardson

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

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

10
Kamil Kiełczewski

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

Поскольку проект не требует CommonJs и должен иметь совместимость с ES3 (модули не поддерживаются), все, что вам нужно, это просто удалить все операторы export и import из вашего кода , потому что ваш 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')

бросает 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
    }
})}

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

0
Kibonge Murphy