6

我正在尝试将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. 我读到另一个堆栈答案 ,我必须available globally which could be done via用这个来制作Tether requirejs.config.js`

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

但是没有这样的配置Aurelia

4

1 回答 1

13

在这上面花了一些时间之后,我相信我想出了一些有用的东西。我看不到任何错误,现在我可以使用了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它就可以正常工作。另请注意,tetherdeps[]数组中添加没有任何效果(可能是因为Tether现在是全局的prepend),但我喜欢在那里看到它以提醒它无论如何它是一个依赖项。

编辑

正如@Paul-Sebastian 所提到的,最好不要tether出现在depsof 中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但脚本被附加到包的末尾,在所有其他项目之后。与 prepend 部分一样,所有项目都与项目文件夹相关,而不是 src。

于 2016-09-13T02:19:06.540 回答