尚未为上下文加载模块名称 "jquery"：_。使用要求

Question

我正在尝试将我的 Javascript 文件迁移到 Typescript 文件，但是当我尝试在 html 页面中使用转译的 javascript 文件时，我遇到了以下错误:

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;

我已经从 CDN 加载了 Jquery，如下所示

    <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.

Answer 1

您已将代码从 TypeScript 转换为 CommonJS。

浏览器不支持CommonJS模块系统，只支持ECMAScript模块系统。

您使用的requirejs库仅支持AMD模块系统。

您应该在转译代码时解决这个问题。您需要定位浏览器。这通常使用 Webpack which has a loader for TypeScript modules.

来完成

旁白：如果您正在 importing（并因此捆绑）jQuery，那么您也不应该从 CDN 加载它。

尚未为上下文加载模块名称 "jquery"：_。使用要求

Module name "jquery" has not been loaded yet for context: _. Use require

javascript

typescript

requirejs