jquery - 将 UI 外部 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 与 sapper 一起使用。我下载了模板，并且我知道 jQuery 代码是用于视觉效果的。

Answer 1

您可以使用npm install jquery等命令通过npm添加jQuery或其他脚本。或者，如果您更喜欢 yarn 包管理器，请通过 yarn add jquery。

然后您可以使用以下方法在组件中导入必要的脚本:

import jQuery from 'jquery';

Sapper 模板中 routes/index.svelte 中 Borat 图像的使用示例:

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

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