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

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

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

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

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

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

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

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

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

Я из электронной среды, где мне нужно 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
    }
})}

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

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 {}

Окончательно сгенерированный код всегда будет иметь (по крайней мере для машинописного текста 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']) в "your-script.js"
   не требуется ('имя-имя')
   const {ipcRenderer} = требуется ([электрон)]
   Не: const {ipcRenderer} = требуется (электрон)