aurelia - 在 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。 这是正常的吗？

第二次尝试:

我换了 require到这里app.html :

<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当我 <require from="bootstrap"> 时自动加载所有必要的文件.或者我仍然应该将它们作为单独的文件加载？如果是这样，在这种情况下我该如何加载 jquery？

Answer 1

require element 用于拉入 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';

然后你可以使用$随心所欲地发挥作用。