在 aurelia 应用程序中需要 bootstrap 和 jquery

Question

我是 Aurelia 的新手，所以我不太确定这应该如何工作。我创建了一个新的 Aurelia 项目并安装了bootstrap，只需执行jspm install bootstrap。我在控制台中看到这也引入了jquery 3.0.0。

现在我的问题是，如何在我的项目中使用bootstrap.css、bootstrap.js 和jquery.js？

第一次尝试：

在app.html 中，我尝试执行以下操作：

<require from="bootstrap"></require>

我试过了，因为我的 config.js 中有以下行：

map: {
    ...
    "bootstrap": "github:twbs/bootstrap@3.3.6",
    ...
}

这种方法在加载bootstrap.js 的意义上是有效的，但随后在浏览器中出现错误，提示它缺少jquery.js。所以它不会自动为我加载 jquery。 这正常吗？

第二次尝试：

我在app.html 中将我的require 更改为这个：

<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>

我不确定它如何知道在哪里查找 bootstrap.js 和 bootstrap.css 文件，因为它们位于：jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css 等。但它知道如何找到引导文件。但不是 jquery 文件。

我在我的 config.js 中有这个用于 jquery：

map: {
    ...
    "github:twbs/bootstrap@3.3.6": {
      "jquery": "npm:jquery@3.0.0"
    },
    ....
}

所以基本上我的问题是，这应该如何工作？当我<require from="bootstrap"> 时，require 是否应该自动加载所有必要的文件。还是应该将它们作为单独的文件加载？如果是这样，在这种情况下我该如何加载 jquery？

Answer 1

require 元素用于拉入 Aurelia 组件、html 模板（即 Aurelia 组件）或 css 文件。它不是用来加载 javascript 文件的。

Aurelia 骨架展示了如何在其main.js 文件中加载 Bootstrap：

import 'bootstrap';

是文件的第一行。这将初始化 Bootstrap 的 javascript 代码。

在app.html 中一个require 元素用于加载Bootstrap 的css：

<require from="bootstrap/css/bootstrap.css"></require>

将 jQuery 导入文件也非常简单：

import $ from 'jquery';

然后您可以随意使用$ 函数。

Answer 2

我遇到了这个问题，然后安装了最新的节点和 npm，然后从 aurelia 网站上的教程页面：-

要设置 Bootstrap，我们首先使用 NPM 安装库本身。在命令行上执行以下命令：

npm install bootstrap --save

接下来，因为 Bootstrap 使用了 jQuery，我们也想安装 jQuery，像这样：

npm install jquery@^2.2.4 --save

然后在更新包时重新启动应用程序并再次运行它...已修复！

Answer 3

添加后 导入“引导”； 在 main.js 中，您可能需要停止应用程序 (Ctrl + c) 并再次运行它 au run --watch 让它发挥作用。