den0820
@den0820
Фронтенд Junior разработчик.

Как подключить модуль с помощью require()?

Здравствуйте. Опишу небольшую предысторию, дабы картина была более ясной. Есть задача реализовать восстановление пароля. Таким образом, получив письмо, в котором содержится ссылка для перехода, я перехожу по ней. Естественно открывается простая HTML страница, где и будет выполняться мой модуль. Я решил не подтягивать к этой странице главный js файл (Допустим это main.js), а только лишь подключить свой модуль, допустим это restore-pas.js. В ходе выполнения моей задачи, в моем модуле я хотел бы использовать еще и 2 дополнительных небольших модуля, таких как messages.js и buttons.js. Я их подключаю как обычно использовал во всем проекте через require(''); Однако именно в этом случае происходит ошибка: ReferenceError: require is not defined. Все пути я перепроверил, но думаю тут ошибка не в путях. Подскажите, пожалуйста, как можно решить эту проблему. Привожу код:

var Messages = require('utils/messages.js');

var RecoverPass = function () {
    console.log(1);

    this.msg = new Messages(document.querySelector('#recover .tvz-alerts'));
    this.msg.show('success', 'Hello');
};

window.addEventListener('load', function() {
    var recover = new RecoverPass();
});

module.exports = RecoverPass;
  • Вопрос задан
  • 1065 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
В этом курсе, вы найдете ответы на ваши вопросы - learn.javascript.ru/screencast/webpack
Как вам уже сказал, Дмитрий, чтобы require работал - нужно использовать сборщик, который умеет превращать require в нативную функцию подргузки модуля где-то из недр своего файла.

В вашем случае, require не может работать, так как такой функции нет в window объекте (как известно, глобальный объект для клиентского js - window)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Для того чтоб модули работали на клиенте код нужно собирать с помощью webpack или аналогов
Ответ написан
den0820
@den0820 Автор вопроса
Фронтенд Junior разработчик.
Здесь подключение выше приведенного модуля к HTML странице:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

  <title>Восстановление пароля</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='css/reset_password/normalize.css')}}" />
  <link rel="stylesheet" href="{{ url_for('static', filename='css/reset_password/main.css')}}" />
  <!--<script src="{{ url_for('static', filename='js/dist/main.js')}}"></script>-->
  <script src="{{ url_for('static', filename='js/src/pages/profile/restore-pass.js')}}"></script>

</head>
<body>

{% block content %}
{% endblock content %}

</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы