标有“`webpack`”标记的外部的角` `build`‘抛出误差

Question

在我的角度，我是从外部加载jquery，它工作。但是，在build之后，我得到了一个错误Uncaught ReferenceError: jQuery is not defined。请注意，我的构建下载了jquery。

问:如何用我的构建映射jquery？

index.html：

<script type="systemjs-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.8.2/lib/system/single-spa.min.js",
          "jquery": "https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
        }
      }
    </script>

 <script>
      System.import("single-spa");
      System.import("jquery");
    </script>

webpack配置(它在本地运行良好)

module.exports = {
  externals: {
    jquery: ["jQuery"],
  },
};

注意:构建完成后，如果在服务器上运行它，就会得到错误：

Uncaught ReferenceError: jQuery is not defined
    at Object.xeH2 (main-es2015.3ee70c890346f45d7daa.js:2)
    at l (runtime-es2015.cdfb0ddb511f65fdc0a0.js:1)
    at Module.zUnb (main-es2015.3ee70c890346f45d7daa.js:2)
    at l (runtime-es2015.cdfb0ddb511f65fdc0a0.js:1)
    at Object.0 (main-es2015.3ee70c890346f45d7daa.js:2)
    at l (runtime-es2015.cdfb0ddb511f65fdc0a0.js:1)
    at t (runtime-es2015.cdfb0ddb511f65fdc0a0.js:1)
    at Array.r [as push] (runtime-es2015.cdfb0ddb511f65fdc0a0.js:1)
    at main-es2015.3ee70c890346f45d7daa.js:2

我的服务器尝试从外部源下载jquery。

​

​

Answer 1

解释

当webpack外部是一个对象时，键是您在代码中导入的名称，值是运行时环境中模块的名称。

webpack包使用的“运行时环境”可以是全局变量，也可以是SystemJS模块注册表，这取决于webpack配置的output.libraryTarget。webpack外部性的行为因不同的libraryTargets而发生变化。

如果您的libraryTarget是"system" (推荐用于SystemJS加载)、"umd"或"amd"，那么这里的错误是SystemJS模块注册表中模块的名称是jquery，但是您的webpack配置希望它是jQuery。SystemJS模块名区分大小写。

如果您的libraryTarget未指定或var，则webpack将查找一个名为jQuery的全局变量。如果您额外使用了systemjs amd.js，那么jQuery将不会作为全局变量创建。但是如果您不使用amd.js，那么jQuery将被创建为一个全局变量。

可能的修正

1. 更改webpack配置，以期望运行时环境提供jquery而不是jQuery。只有当webpack libraryTarget是system、umd或amd (如前所述)时，这才能起作用。

// webpack.config.js
module.exports = {
    externals: {
        jquery: "jquery",
    },
};

webpack配置相当于提供外部字符串数组：

// webpack.config.js
module.exports = {
    externals: ["jquery"]
};

1. 从您的SystemJS文件中删除额外的amd.js。这将确保将jQuery创建为全局变量。然后确保webpack配置的libraryTarget不是未指定的，就是var。

进一步诊断

要在这里诊断问题，可以在浏览器控制台中运行以下命令：

await System.import('jquery')

这将打印jquery模块是如何由SystemJS加载的。您应该单击已记录的值来展开它并查看键。您应该会看到您熟悉的jquery函数。