JSPM / Aurelia / Bootstrap 4 找不到 jQuery

Posted 2023-03-14

【中文标题】JSPM / Aurelia / Bootstrap 4 找不到 jQuery

【英文标题】：JSPM / Aurelia / Bootstrap 4 can't find jQuery

【发布时间】：2016-06-14 23:41:35

【问题描述】：

所以我有一个使用 jspm 的 aurelia 设置。我已经像这样安装了 Bootstrap 4：

jspm install npm:bootstrap@4.0.0-alpha.2

然后在 main.js 我做了：

import 'jquery';
import 'bootstrap';

export function configure(aurelia) 
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  //Uncomment the line below to enable animation.
  //aurelia.use.plugin('aurelia-animator-css');
  //if the css animator is enabled, add swap-order="after" to all router-view elements

  //Anyone wanting to use htmlImports to load views, will need to install the following plugin.
  //aurelia.use.plugin('aurelia-html-import-template-loader')

  aurelia.start().then(() => aurelia.setRoot());

我什至尝试过import $ from 'jquery'，但是当我用 BS4 启动 aurelia 骨架时，我得到：

Uncaught Error: Bootstrap's javascript requires jQuery

我可以去控制台执行 $ 并返回 jquery 的内容。我认为这是一个竞争条件，但不知道如何解决？

编辑：System.config

System.config(
  defaultJSExtensions: true,
  transpiler: "none",
  paths: 
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  ,
  meta: 
    "bootstrap": 
      "deps": [
        "jquery"
      ]
    
  ,
  map: 

【问题讨论】：

显示 config.js 中包含与“bootstrap”相关的内容的行

【参考方案1】：

使用jspm install bootstrap=github:twbs/bootstrap@4.0.0-alpha.2

从npm: (see here) 安装bootstrap 和jspm 时出现问题。

请参阅this file 了解如何导入它（来自this project）。

更新：here is the Pull Request that should fix this.

【讨论】：

我通过 github install 试过了。仍然遇到同样的问题。我注意到他们在包中有一个到 jquery 的映射。所以我也试过"map": "jquery": "npm:jquery@3.0.0",。不幸的是，仍然抱怨 jquery 不存在。我的主要js只有import 'bootstrap';

我也尝试了import bootstrap from 'bootstrap'; 我还添加了覆盖以匹配你的覆盖并销毁了我的 jspm_packages 文件夹并安装了新的 jspm

得到它的工作我做你的步骤并降级到 jquery 2.2.4。

很高兴它有帮助！

【参考方案2】：

我最近也遇到了这个问题。尝试安装 jquery 2，而不是 jquery 3。显然，当 jquery 3 作为模块导入时，它不会像在 jquery 2 中那样将其挂起。Bootstrap 4 显然也没有将其作为依赖项请求.

【讨论】：

我刚刚尝试回到 jquery 2.2.0 仍然没有工作。

【参考方案3】：

一种可能的解决方案是在 index.html 的 HEAD 部分从 CDN 加载 jQuery：

<script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

取自https://code.jquery.com。如果需要，请使用不同版本的 jQuery。恕我直言，这实际上是一个更好的部署策略，因为通过从 CDN 加载库，您将在浏览器中获得更多的并发下载（更好的并行性）。

【讨论】：

首先，Aurelia 正在推动 e2e 测试，因此当问题应该使用 jspm 解决时，每次都不得不离开并从网上抓取一个库是不好的做法。其次，Aurelia 正在大力推动电子应用；再说一遍，您真的希望最终用户必须一直连接到网络吗？也就是说，它现在可能作为临时修复有用。

@MeirionHughes 关于 Electron 的观点很好，但这些应用程序默认行为不同，需要全面不同的解决方案。但我不相信使用 CDN 会对 e2e 测试产生不利影响。对于 Web 应用程序来说，它是运行时更好的解决方案（比捆绑 jQuery 更好），因为它能够与来自其他域的脚本同时下载。