Блог

Главная - Вопросы по программированию - Имя модуля «jquery» еще не загружено для контекста: _. Использовать требуется

Имя модуля «jquery» еще не загружено для контекста: _. Использовать требуется

#javascript #typescript #requirejs

Вопрос:

Я пытаюсь перенести свои файлы Javascript в файлы машинописного текста, однако я застрял, когда пытаюсь использовать перенесенный файл javascript на html-странице и получаю следующую ошибку:

 https://requirejs.org/docs/errors.html#notloaded
at makeError (require.min.js:1)
at Object.s [as require] (require.min.js:1)
at requirejs (require.min.js:1)
at helloworld.js:4

Мой файл машинописного текста

 import * as $ from "jquery";

export class Loading {
  public showLoadingModal(msg?: string) {
    if (msg === undefined) {
  msg = "Loading ...";
    }
    $("#dialog1 label").html(msg);
    //$('#pleaseWaitDialog').modal({ backdrop: 'static', keyboard: false });
  }

  public hideLoadingModal() {
    // $('#pleaseWaitDialog').modal('hide');
  }

  public keepOpenLoadingModal() {
    $("#dialog1").on("hide.bs.modal", function () {
      return false;
    });
    this.showLoadingModal();
  }
}

Транспилированный файл Javascript

 "use strict";
exports.__esModule = true;
exports.Loading = void 0;
var $ = require("jquery");
var Loading = /** @class */ (function () {
    function Loading() {
    }
    Loading.prototype.showLoadingModal = function (msg) {
        if (msg === undefined) {
            msg = "Loading ...";
        }
        $("#dialog1 label").html(msg);
        //$('#dialog1').modal({ backdrop: 'static', keyboard: false });
    };
    Loading.prototype.hideLoadingModal = function () {
        // $('#dialog1').modal('hide');
    };
    Loading.prototype.keepOpenLoadingModal = function () {
        $("#dialog1").on("hide.bs.modal", function () {
            return false;
        });
        this.showLoadingModal();
    };
    return Loading;
}());
exports.Loading = Loading;

Я загрузил Jquery из CDN, как показано ниже

     <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title></title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
          crossorigin="anonymous"
        />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
        <script>
          var exports = {};
        </script>
        <script src="helloworld.js"></script>
      </head>
      <body>
        <h3 class="text-center mt-2 mb-2">Demo</h3>
      </body>
    </html>

Я также попытался загрузить jquery с приведенным ниже кодом, но безуспешно

       var exports = {};
      requirejs.config({
        baseUrl: "/js/lib",
        paths: {
          jquery: "jquery.min",
        },
      });
      requirejs(["jquery"], function (jquery) {
        console.log(jquery); // OK
      });
    </script>```
Can you please help me resolve the error, I know this is very first step in my migration journey and I am badly stuck here, any help is much appreciated.

Ответ №1:

Вы переместили код с машинописного текста на обычный.

Браузеры не поддерживают систему модулей CommonJS, они поддерживают только систему модулей ECMAScript.

Используемая requirejs вами библиотека поддерживает только модульную систему AMD.

Вы должны исправить это в момент переноса кода. Вам нужно настроить таргетинг на браузеры. Чаще всего это делается с помощью Webpack, в котором есть загрузчик для модулей машинописи.

В стороне: если вы import используете (и, следовательно, объединяете) jQuery, вам также не следует загружать его с CDN.

Комментарии:

1. спасибо за ваш ответ. Если я настрою часть транспиляции с помощью webpack, как вы предложили, то как будут учитываться зависимости для Jquery или Bootstrap.js? будет ли об этом заботиться сам веббэк?

2. Вы import редактируете jQuery, поэтому jQuery будет включен в пакет, созданный Webpack.

3. Отлично, так что это означает, что там, где мне нужно использовать файл пакета, мне не нужно беспокоиться о запросе или Bootstrap.js. Также будет ли это возможно, если я смогу создать отдельные файлы js для каждого файла ts? когда я буду строить из проекта webpack или это будет единый пакет, содержащий все файлы ts?

4. Спасибо за быстрый ответ, я попробую и, возможно, побеспокоюсь, если застряну.

5. Еще одна справка/запрос, предположим, что у меня есть пакет, созданный с помощью веб-пакета, и я загрузил bundle.js файл на html-странице. Теперь, если мне понадобится использовать классы, созданные из этого bundle.js файл, то как его следует называть? Предположим, что у меня есть класс showLoading в файле showLoading.ts, и я хотел бы использовать его из этого bundle.js.

Метки: