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

问题描述

我正在尝试将 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. 我读了另一个堆栈答案，我必须对此进行makeTether available globally which could be done via requirejs.config.js`

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

，但是Aurelia没有这样的配置.

解决方案

在花了更多时间之后，我相信自己想到了一些可行的方法.我再也看不到任何错误，并且现在可以使用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

现在在Aurelia-CLI中刚刚添加了一个append部分，以帮助使用带有插件的旧版库.该部分内容如下:

一个带有插件的非常顽固的旧版库

某些旧版库可能支持您还希望将其包含在捆绑软件中的插件.在某些情况下，这些插件取决于 主库定义的全局对象，因此重要的是 插件在捆绑包中的存在时间比主库脚本晚.这些 插件可以进入append部分，其工作原理完全相同 作为prepend部分，但脚本会附加到 捆绑销售商品，其他所有商品除外.像前置部分一样，所有项目 是相对于项目文件夹，而不是src.

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

I tried something along this

"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"
  ]
},

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;    
});

but there's no such config with Aurelia.

解决方案

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.

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"
        ]
    },
    ...

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.

EDIT

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"
    ]
 },

EDIT #2

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:

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中添加系绳以与Bootstrap 4一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！