Блог

Главная - Вопросы по программированию - Как импортировать и использовать конкретные плагины JavaScript для начальной загрузки 5?

Как импортировать и использовать конкретные плагины JavaScript для начальной загрузки 5?

#javascript #twitter-bootstrap #bootstrap-5

Вопрос:

Я новичок в Bootstrap (v5.1.0) и gulp и не совсем понимаю, как я могу импортировать только определенные плагины JavaScript для начальной загрузки. Я попытался сделать это, просто используя модальный плагин Bootstraps, но я либо получаю сообщение об ошибке в консоли браузера (синтаксическая ошибка в инструкции импорта), при нажатии кнопки модального запуска ничего не происходит.

Мой index.html с модальным примером из документа Bootsrap 5

 <head>
  ...
  <script src="main.js" async></script>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
</body>

Теперь моя идея состояла в том, чтобы просто импортировать необходимые плагины JS (расположенные в js/src/ в пакете начальной загрузки) в верхней части моего main.js файл:

 (async function main() {
  import BaseComponent from 'bootstrap/base-component.js'
  import Modal from 'bootstrap/modal.js'
  const {myConfig} = await import("./myconfig.js");
  ...
})();

В качестве альтернативы я попытался импортировать их таким образом:

 import { BaseComponent } from 'bootstrap/base-component'
import { Modal } from 'bootstrap/modal'

(async function main() {
  const {myConfig} = await import("./myconfig.js");
  ...
})();

Не мог бы кто-нибудь объяснить, пожалуйста, как выборочно импортировать JS-плагины Bootstrap или каковы рекомендации при работе с JS-плагинами Bootstrap? В данный момент я собираю исходные файлы своего веб — сайта с помощью gulp-на всякий случай, если это имеет значение.

Метки: