如何在 Aurelia-CLI 中添加 Tether 以与 Bootstrap 4 一起使用 [英] How to add Tether in Aurelia-CLI to use with Bootstrap 4

问题描述

我正在尝试将 Bootstrap 4 添加到 Aurelia.我只能让 CSS 工作，但 bootstrap.js 需要 Tether 并且我不能把它包括在内，因为我一直在得到这个控制台错误:

I am trying to add Bootstrap 4 to Aurelia. I can only get the CSS to work but the bootstrap.js requires Tether and I can't get it included, since I keep getting this error in the console:

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.我在另一个堆栈答案上读到我必须让Tether在全球范围内可用，这可以通过代码>requirejs.config.js` 与此

It does bundle, but it's still complaining about the missing Tether. I read on another stack answer that I have to makeTetheravailable globally which could be done viarequirejs.config.js` with this

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

但是Aurelia 没有这样的配置.

but there's no such config with Aurelia.

推荐答案

在这上面花了更多时间之后，我相信我想出了一些可行的方法.我没有再看到错误，我现在可以使用 Bootstrap tooltip，所以我假设这是可行的解决方案.

After some more time spent on this, I believe that I came up with something working. I don't see anymore errors and I am now able to use Bootstrap tooltip, so I will assume this is the working solution.

所有更改都在 aurelia.json 配置文件中进行，如下所示:

All the changes were made inside the aurelia.json configuration file, as the following:

"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 即可使其工作.另请注意，在 deps[] 数组中添加 tether 无效(可能是因为 Tether 现在是全局的，带有 prepend)，但我喜欢在那里看到它，以提醒它无论如何都是依赖项.

So basically, I just had to add it to the prepend to get it working. Also note that adding tether inside the deps[] array has no effect (probably because Tether is now global with the prepend), but I like to see it there as a reminder that it's a dependencies anyway.

编辑

正如@Paul-Sebastian 所提到的，最好从 Bootstrap 的 deps 中删除 tether 以消除双重包容.基本上这是更新的代码:

As mentioned by @Paul-Sebastian, it's probably better to remove tether from showing up in the deps of Bootstrap to remove possibility of double inclusion. Basically this is the updated code:

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

编辑#2

现在还有一个 append 部分刚刚添加到 Aurelia-CLI 以帮助使用带有插件的 Legacy Library.该部分内容如下:

There is now also an append section that just got added to Aurelia-CLI to help with Legacy Library with Plugins. The section reads as the following:

一些遗留库可能支持您也希望包含在您的包中的插件.在某些情况下，这些插件依赖于由主库定义的全局对象，因此重要的是插件比主库脚本更晚出现在包中.这些插件可以放在 append 部分，其工作方式完全相同作为 prepend 部分，但脚本被附加到捆绑，在所有其他项目之后.喜欢前面的部分所有项目相对于项目文件夹，而不是 src.

A Very Stubborn Legacy Library With Plugins

Some legacy libraries may support plugins which you also want included in your bundle. In some cases these plugins depend on a global object defined by the main library, so it is important that the plugins exist later in the bundle than the main library scripts. These plugins can go in the append section, which works exactly the same as the prepend section but the scripts are appended to the end of the bundle, after all other items. Like the prepend section all items are relative to the project folder, not the src.

这篇关于如何在 Aurelia-CLI 中添加 Tether 以与 Bootstrap 4 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！