如何在 Aurelia-CLI 中添加 Tether 以与 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.

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