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 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>

导入UI外部DOM操作器以精简客户端

1 个答案: