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

Итак, я пишу приложение с Node/express + jade combo.

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

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

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

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

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

4 206
javascript node.js iis-express sockets pug

4 ответа:

это так require() Не существует в браузере/клиентском JavaScript.

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

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

  1. использовать <script> тег.
  2. использовать CommonJS реализация. Синхронные зависимости, такие как узел.js
  3. использовать AMD реализация.

CommonJS на стороне клиента-реализации включают в себя:

(большинство из них требуют шага сборки перед развертыванием)

  1. Browserify - вы можете использовать большинство узлов.модули JS в браузере. Это мой личный фаворит.
  2. Webpack - делает все (связки JS, CSS и т. д.). Сделано популярным всплеском реакции.js. Печально известный своим трудным обучением кривая.
  3. Rollup - новый претендент. Использует модули ES6. Включает возможности встряхивания дерева (удаляет неиспользуемый код).

вы можете прочитать больше о моем сравнении Browserify vs Component.

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

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

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

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

321

ES6: в html включить основной js файл с помощью атрибута type="module" (поддержка браузеров):

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

и script.js файл включает в себя другой файл, как это:

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

в модуле.Яш' вы должны экспорт функции / класса что вы импортируете

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

работающего пример.

5

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

поскольку проект не требует 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();
1
Even using this won't work , I think the best solution is 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