posted: 2019/05/12

parcelでsvelte3をセットアップする

Svelteをいじって見たくてParcelでやってみた。ちょっとハマったのでメモ

とりあえずやり方はこんな具合

まずはパッケージインストール

$ yarn add parcel-bundler parce-plugin-svelte svelte

$ touch src/index.html
$ touch src/main.js
$ touch src/App.svelte

それぞれをこんな感じでセットアップ

<!-- index.html -->
<html>
  <body>
    <div id="container"></div>
    <script src="./main.js"></script>
  </body>
</html>

// App.svelte
<div>hello</div>

// main.js
import App from "./App.svelte"

const app = new App({
  target: document.querySelector("#container"),
  data: {}
})

export default app

あとは下記コマンド。必要があればpackage.jsonのscriptsに指定すると良いだろう

$ yarn parcel src/index.html

Class constructor SvelteComponent cannot be invoked without 'new' が出たら

ちょっと深追いしてないが、browserlistの設定をしないと上記エラーが出るようだ。

このissueに従って、package.jsonに下記を設定する

  "browserslist": [
    "last 1 chrome versions"
  ],