svelte-glの環境構築

環境構築

とりあえずsvelteGLのデモページの内容がローカルで動くように構築するまでにrollupの設定が必要だったので手順をメモ。

STEP1 svelteの環境を作る

npx degit sveltejs/template プロジェクト名でテンプレートの環境が作れる

STEP2 svelteGLを入れる

npm install @sveltejs/glでsvelteglを入れる。
この段階で、npm run devするとmjsファイルとglslファイルが読み込めないというエラーが出るようになる。

STEP3 エラーを解消する

上記のエラーを解消するために、rollup.config.jsにそれらを読めるようにする設定を加える。

1. 以下のプラグインを入れる。
   npm install --save-dev rollup-plugin-babel@latest
npm install --save-dev rollup-plugin-glslify

2. configファイルで読み込むように追加

import babel from 'rollup-plugin-babel';
import glslify from 'rollup-plugin-glslify';

1. pluginsの配列のsvelteの下に以下を追加

babel({
    exclude: 'node_modules/**'
  }),
glslify(),

参考

svelte

• Svelteで始める頑張らないフロントエンド生活 前編

rollup.js

• JavaScriptの新しいモジュールバンドラ rollup.js とは

設定プラグイン

• rollup/rollup-plugin-babel
• rollup-plugin-glslify