Как добавить Tether в Aurelia-CLI для использования с 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, Я прочитал другой ответ на стек, который я должен сделать available globally which could be done via requirejs.config.js` с этим

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

но нет такого конфига с Aurelia,

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 чтобы это заработало. Также обратите внимание, что добавление tether внутри deps[] массив не имеет никакого эффекта (вероятно, потому что Tether в настоящее время является глобальным с prepend), но мне нравится видеть это там как напоминание, что это все равно зависимости.

РЕДАКТИРОВАТЬ

Как упомянул @Paul-Sebastian, лучше удалить tether от появления в deps из Bootstrap убрать возможность двойного включения. В основном это обновленный код:

"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 с плагинами. Раздел гласит следующее:

Очень упрямая устаревшая библиотека с плагинами

Некоторые устаревшие библиотеки могут поддерживать плагины, которые вы также хотите включить в свой пакет. В некоторых случаях эти плагины зависят от глобального объекта, определенного основной библиотекой, поэтому важно, чтобы плагины существовали в пакете позже, чем сценарии основной библиотеки. Эти плагины могут идти в append раздел, который работает точно так же, как prepend раздел, но сценарии добавляются в конец пакета, после всех других элементов. Как и в разделе prepend, все элементы относятся к папке проекта, а не к src.

Другие вопросы по тегам