Question

我正在尝试将Bootstrap 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。我在另一个stack answer上读到了我必须使用此 available globally which could be done via requirejs.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-Sebastian所述，最好将tether移除deps 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。

如何在Aurelia-CLI中添加Tether以与Bootstrap 4一起使用

1 个答案:

带有插件的非常顽固的遗产图书馆