Svelteを始めるなら、次のコマンドを入力するのが手っ取り早い。
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev次のようなディレクトリ構成が生成される。
my-svelte-project / |--package-lock.json |--package.json |--rollup.config.js |--public | |-- "omitted" |--src | |--App.svelte | |--global.d.ts | |--main.ts
また、プログラムを編集する前に、以下を実行しておくと、Typescriptを使用することができるようになる。
node scripts/setupTypeScript.jsそのほかに便利なプラグインとして、以下の2つが便利だった。
これらは、Svelteによって作成したコンポーネントのscript内にあるimport文に効果があるプラグインである。aliasは、インポートするときのパスに別名をつけることができるようにする。jsonは、言わずもがなjsonをインポートするときに必要になる。これを使用せずにjsonをインポートすると、ビルドする時に警告が出る。
なお、Svelteにとって必要かどうかは全くしらないが、jsonをインポートするときに、これを追加しておいた。Svelteのコンポーネントではなく、ピュアなTypeScriptでJsonをインポートするときに必要だ。
// src/json.d.ts
declare module '*.json' {
const data: any;
export default data;
}Svelteを使いこなすのに、rollupの知識がしばしば要求されるな。というより、Svelteはrollupのうまいラッパーと心得たほうがよさそうだ。
大昔のJavaScriptの世界にはビルドなんてなかったから、あのときからずいぶん進歩したよなぁ。Node.jsが有名になってから少ししたくらい（それでもはるか昔だね）に、webpackとか、babelとか、gulpとかを知った時は感動したものだわ。rollupもhtmlやcss、なんとかscriptをまとめる便利なツールなんだろうね。