时间戳

首页 > 解决方案 > 用`webpack`贴花的外部的角度`build`抛出错误

jquery - 用`webpack`贴花的外部的角度`build`抛出错误

问题描述

在我的角度，我jquery从外部加载并且它有效。但是，在 之后build，我得到一个错误Uncaught ReferenceError: jQuery is not defined 。我的版本下载jquery，请注意。

问题：我怎样才能映射到jquery我的构建？

索引.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从外部源下载。

这是服务器中的网络

标签： jqueryangularwebpackangular-cliwebpack-externals

解决方案

解释

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

webpack 包使用的“运行时环境”可以是全局变量或 SystemJS 模块注册表，具体取决于您的 webpack 配置的output.libraryTarget。不同 libraryTargets 的webpack externals的行为会发生变化。

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

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

可能的修复

  1. 更改您的 webpack 配置以期望运行时环境提供jquery而不是jQuery. 这只有在 webpack libraryTarget 是system, umd, or时才有效amd（如上所述）。
// webpack.config.js
module.exports = {
    externals: {
        jquery: "jquery",
    },
};

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

// webpack.config.js
module.exports = {
    externals: ["jquery"]
};
  1. 从 index.html 文件中删除 SystemJS amd.js extra。这将确保将 jQuery 创建为全局变量。然后确保 webpack 配置的 libraryTarget 是 unspecified 或var.

进一步诊断

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

await System.import('jquery')

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

推荐阅读