Клієнт у вузлі: Uncaught ReferenceError: вимагати не визначено

Отже, я пишу заявку за допомогою комбінації вузла / express + нефрит.

У мене є 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. Вебпак - робить все (в комплекті JS, CSS тощо). Популярний завдяки сплеску React.js. Відомий своєю важкою кривою навчання.
3. Збірник - новий претендент. Використовує модулі ES6. Включає здібності струшування дерева (видаляє невикористаний код).

Ви можете прочитати більше про моє порівняння компонента Browrify vs (застарілого) .

Реалізація AMD включає:

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

Зауважте, у вашому пошуку вибору, з ким іти, ви прочитаєте про Bower . Bower призначений лише для залежностей від пакета і не підтримує визначення модулів, такі як CommonJS та AMD.

Сподіваюся, що це допомагає деяким.

Я приходжу з електронного середовища, де мені потрібен IPC-зв’язок між процесом візуалізації та основним процесом. Процес візуалізації сидить у файлі HTML між тегами сценарію та створює ту саму помилку. Лінія

const {ipcRenderer} = require('electron')

кидає Uncaught ReferenceError: вимагати не визначено

Мені вдалося обійти це завдання, вказавши інтеграцію вузлів як істинну, коли вікно браузера (куди вбудований цей 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 {}

Кінцево згенерований код завжди матиме (принаймні, для typecript 3.0) такі рядки

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

Навіть використовувати це не вийде, я вважаю, що найкраще рішення - перегляньте:

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>
   примітка!
   використання: -> вимагати (['moudle-name']) у "your-script.js"
   не вимагає ('ім'я moudle')
   const {ipcRenderer} = вимагати (['електрон'])
   Не: const {ipcRenderer} = вимагати ('електрон')