External Post

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"
  ],
この記事の修正をする