Импорт внешнего манипулятора DOM пользовательского интерфейса в клиент svelte

Question

Я не являюсь разработчиком внешнего интерфейса, поэтому надеюсь, что здесь я использую правильные термины.

Я играю с сапером.

Я нашел бесплатный шаблон jQuery, Bootstrap html и перенес его в sapper.

Я извлек часть кода для компонентов и поместил все ресурсы в статическую папку. На самом деле все работает нормально.

Проблема в том, что у меня есть повторяющийся тег сценария на всех моих маршрутах. Мне кажется, что есть лучший способ сделать это.

<svelte:head>
  <script src="js/modernizr-2.6.2.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>
  <script src="js/main.js"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
</svelte:head>

Пожалуйста, не говорите мне, что я не должен использовать jQuery с сапером. Я загружаю шаблоны и понимаю, что код jQuery предназначен для визуальных эффектов.

Answer 1

Вы можете добавить jQuery или другие скрипты через npm, используя такие команды, как npm install jquery, Или, если вы предпочитаете менеджер пакетов пряжи, yarn add jquery,

Затем вы можете импортировать необходимые скрипты в ваш компонент, используя:

import jQuery from 'jquery';

Пример использования изображения Бората в routes/index.svelte из саперного шаблона:

<script>
import jQuery from 'jquery';
import { onMount } from 'svelte';

onMount(() => {
    jQuery('img').click(() => {
        console.log('test');
    });
});
</script>