Как загрузить внешнюю библиотеку JS в Svelte / Sapper? - PullRequest
Новая
       8

Как загрузить внешнюю библиотеку JS в Svelte / Sapper?

2 голосов
/ 07 января 2020

Я пытался загрузить редактор ace (https://ace.c9.io/) в мое приложение Sapper. Я успешно загрузил его в тег script, когда загрузил его по маршруту Sapper, но когда я пытаюсь сделать то же самое в компоненте Svelte, который снова отображается маршрутом, я получаю сообщение об ошибке:

туз не определен

У меня есть код, который отлично работает, если это Сапер-маршрут: 

<div id="editor"> def main():
    return sum(range(1,100))
</div>

    <script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" type="text/javascript" charset="utf-8"></script>

    <script>
          var editor = ace.edit("editor");
          editor.setTheme("ace/theme/monokai");
          editor.session.setMode("ace/mode/python");
          editor.resize()
    </script>

1 Ответ

4 голосов
/ 07 января 2020

Способ использования внешней библиотеки в Svelte - import. Я не знаю, как легко это сделать с Ace - редакторы кода, как правило, довольно сложны, со своими собственными модульными системами для загрузки языков и тем и т. Д. c - но в теории это выглядело бы что-то вот так: 

<script>
  import ace from 'ace';
  import { onMount } from 'svelte';

  let div;
  let editor;

  onMount(() => {
    // we need to use onMount because the div hasn't
    // been created by the time the init code runs
    editor = ace.edit(div);
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/python");
    editor.resize();

    return () => {
      // any cleanup code goes here
    };
  });
</script>

<div bind:this={div}> def main():
    return sum(range(1,100))
</div>

Если импорт не удался, вы всегда можете сделать это старомодным способом, добавив тег <script src="..."> к своему основному template.html и продолжая использовать ace в качестве Глобальный. Теги <script src="..."> внутри компонентов Svelte будут загружаться асинхронно - иными словами, код вашего компонента будет обычно выполняться до загрузки внешнего скрипта.

...