如何在Aurelia中添加系绳，以便与Bootstrap 4一起使用

Question

我正在尝试将自举4添加到Aurelia中。我只能让CSS工作，但是bootstrap.js需要Tether，而且我不能包含它，因为我一直在控制台中得到这个错误：

Bootstrap tooltips require Tether

我试了一些东西

"jquery",
"Tether",
{
  "name": "tether",
  "path": "../node_modules/tether/dist",
  "main": "js/tether.min",
  "exports": "Tether",
  "resources": [
    "css/tether.css"
  ]
},
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["tether", "jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
},

它确实捆绑了，但仍在抱怨缺少的Tether。我在另一个堆叠应答上读到，我必须用这个makeTetheravailable globally which could be done viarequirejs.config.js`

define(['lib/tether.min'], function(tether) {
    window.Tether = tether;    
});

但是Aurelia没有这样的配置。

Answer 1

在这件事上花了一段时间之后，我相信我想出了一些有用的东西。我看不到更多的错误，现在我可以使用Bootstrap tooltip了，所以我假设这是一个可行的解决方案。

所有这些更改都是在aurelia.json配置文件中进行的，如下所示：

"prepend": [
   "node_modules/bluebird/js/browser/bluebird.core.js",
   "node_modules/tether/dist/js/tether.min.js",
   "scripts/require.js"
],
"dependencies": [
    ...
    "aurelia-templating-binding",
    "jquery",
    "tether",
    {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery", "tether"],
        "exports": "$",
        "resources": [
            "css/bootstrap.css"
        ]
    },
    ...

因此，基本上，我只需将它添加到prepend中才能正常工作。还请注意，在tether数组中添加deps[]没有任何效果(可能是因为Tether现在是全局的prepend)，但我希望在那里看到它提醒您，它是一个依赖项。

编辑

正如@Paul所提到的，最好将tether从deps of Bootstrap中删除，以消除双重包含的可能性。基本上，这是更新的代码：

"tether",
{
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
        "css/bootstrap.css"
    ]
 },

编辑#2

现在还有一个append部分，它刚刚被添加到Aurelia-CLI中，以帮助使用插件处理遗留库。该节内容如下：

一个非常顽固的带有插件的遗产库 一些遗留库可能支持您也希望包含在您的包中的插件。在某些情况下，这些插件依赖于主库定义的全局对象，因此重要的是插件在包中存在的时间要晚于主库脚本。这些插件可以放在append部分中，它的工作方式与prepend部分完全相同，但是脚本被追加到包的末尾，在所有其他项之后。与预置部分类似，所有项都相对于项目文件夹，而不是src。