Ошибка Bootstrap 4 " для раскрывающегося списка Bootstrap требуется Popper.js", с Aurelia CLI и требуют.Яш

у меня возникли проблемы с настройкой бета-версии Bootstrap 4 в приложении Aurelia CLI (v0.31.1) с requirejs и использованием TypeScript. После того, как я попробовал несколько вариантов конфигурации, я продолжаю получать следующую ошибку консоли:

ошибка Uncaught: раскрывающийся список Bootstrap требует Popper.js

вот шаги для воспроизведения. Сначала установите пакеты:

$ npm install --save jquery bootstrap@4.0.0-beta popper.js

далее я настроил Аурелия.в JSON:

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

обратите внимание в конфигурации выше, что:

  • поппер.js зарегистрирован перед bootstrap
  • используется модуль UMD
  • поппер.js устанавливается как зависимость для bootstrap, рядом с jquery

наконец-то, в моем app.ТС:

import 'bootstrap';

С этой конфигурацией, здание используя au build работает нормально. Но при запуске, используя au run --watch Я получаю следующее ошибки консоли:

ошибка Uncaught: раскрывающийся список Bootstrap требует Popper.js (https://popper.js.org) (по умолчанию.js: 19)
Ошибка Uncaught: раскрывающийся список Bootstrap требует Popper.js (https://popper.js.org) (bootstrap.минута.js: 6)
... немного дальше:
Uncaught TypeError: плагин.нагрузка не является функцией в модуле. (по умолчанию.js: 19)

к сожалению, в документах Bootstrap 4 упоминается только инструкции по webpack. Так же как и поиск по обоим Aurelia's Гиттер.im канал и на StackOverflow. Я не могу найти образцы относительно Aurelia CLI с Require.js. Наконец, Google hits показывает только примеры внедрения альфа-версий (которые опирались на "привязку", а не "поппер").

подобные вопросы на SO, которые имеют ту же ошибку, но не применимы к моей ситуации:

Итак, мой вопрос: как я могу настроить Bootstrap 4 с помощью Popper.js в приложении Aurelia CLI (использование Require.js, а не Webpack)?

спасибо.

11
aurelia aurelia-cli bootstrap-4 requirejs typescript

4 ответов

Поппер заменил трос в бета-версии.

таким образом, вам нужно будет поменять привязь с поппером (или просто добавить его, если у вас никогда не было Альфы) в раздел добавления Вашей Аурелии.файл json. (Убедитесь, что вы ссылаетесь на версию UMD, приведенную ниже)

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

вам также понадобится комплектация, как и ожидалось, что-то вроде этого:

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

=дополнение=

В отличие от tether, поппер не нужно добавлять, кажется. Так что вы можете включить его как и любая другая зависимость с 

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
12

Я удалил поппер.js и использовал версию, встроенную в bs4, используя js/bootstrap.bundle.min вместо js/bootstrap.min

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

использование в комплекте версии BS4 работало для меня следующим образом: -

удалить попер npm uninstall popper.js

обновление BS4 или позднее npm install bootstrap --save

убедитесь, что jQuery устанавливается npm install bootstrap --save

"изменить".угловой-cli.json ' включить jquery и в комплекте BS4

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
1

по состоянию на final bootstrap 4.0 ниже приведен рабочий conf для bootstrap с popper

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

это работает с последней aurelia & bootstrap (по состоянию на 2018-Февраль) без использования метода prepend

0