☰

Svelte/Sapper で外部 JS ライブラリをロードするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript svelte sapper
Svelte/Sapper で外部 JS ライブラリをロードするにはどうすればいいですか? 質問する

私はエースエディタをロードしようとしていました（https://ace.c9.io/) を Sapper アプリケーションに組み込みました。Sapper ルートでロードしたときにはスクリプト タグで正常にロードできましたが、ルートによって再度レンダリングされる Svelte コンポーネントで同じことを実行しようとすると、次のエラーが発生します。

エースは定義されていません

これは私が持っているコードで、Sapper ルートであれば正常に動作します。

<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

最初に Svelte2 を使い始めたときに、外部のレガシー JS ライブラリをロードするためのコンポーネントをハックし、それを Svelte 3 にリファクタリングしました。

// LibLoader.svelte

<svelte:head>
  <script bind:this={script} src={url} />
</svelte:head>

<script>
  import { onMount, createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
  export let url;
  let script;

  onMount(async () => {
    script.addEventListener('load', () => {
      dispatch('loaded');
    })

    script.addEventListener('error', (event) => {
      console.error("something went wrong", event);
      dispatch('error');
    });
  });
</script>

// MyComponent.svelte

<LibLoader url="myExternalLib.js"
on:loaded="{onLoaded}" />


<script>
  import LibLoader from './LibLoader.svelte';


  function onLoaded() {
    myExternalLib.doStuff();
  }
</script>

これは徹底的にテストされたものではなく、1 回限りの場合にはおそらく別のコンポーネントが必要になることはないでしょう。しかし、基本的にこのアプローチは Rich Harris が言及しているタイミングの問題を回避します。今日では、importそれが利用可能であれば、明らかにより良いオプションです。

おすすめ記事