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.jsonscriptsに指定すると良いだろう
$ yarn parcel src/index.html

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

ちょっと深追いしてないが、browserlistの設定をしないと上記エラーが出るようだ。
https://github.com/DeMoorJasper/parcel-plugin-svelte/issues/44
このissueに従って、package.jsonに下記を設定する
  "browserslist": [
    "last 1 chrome versions"
  ],
Edit on Github