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

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 上读到我必须用这个

制作 Tetheravailable 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 中即可使其正常工作。另请注意，在 deps[] 数组中添加 tether 没有任何效果（可能是因为 Tether 现在是 prepend 的全局变量），但我喜欢在此处看到它作为提醒无论如何这是一个依赖项。

编辑

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

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

编辑 #2

现在还有一个 append 部分刚刚添加到 Aurelia-CLI 以帮助使用带有插件的旧版库。栏目内容如下：

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

How to add Tether in Aurelia-CLI to use with Bootstrap 4

requirejs

tether

aurelia

A Very Stubborn Legacy Library With Plugins