#Sapper #TypeScript #Svelte https://sapper.svelte.dev/docs [[Sapper]]を使って[[TypeScript]]のプロジェクトを作ってみる。 ## Getting started [[degit]]を使う。 ``` npx degit "sveltejs/sapper-template#rollup" svel-yuya-tool cd svel-yuya-tool npm i npm run dev ``` ### TypeScriptに適応する ``` node scripts/setupTypeScript.js npm i ``` `npm run build` しなくてもいける? #unknown ### [[Prettier]]を適応 [[SvelteにPrettierを適応]]を参照。 ## Sapper App Structure ```shell  src ├──  ambient.d.ts ├──  client.ts 📝 クライアントのエントリポイント ├──  components │ └──  Nav.svelte ├──  node_modules ├──  routes │ ├──  _error.svelte │ ├──  _layout.svelte │ ├──  about.svelte │ ├──  blog │ │ ├──  [slug].json.js │ │ ├──  [slug].svelte │ │ ├──  _posts.js │ │ ├──  index.json.js │ │ └──  index.svelte │ └──  index.svelte ├──  server.ts 📝 サーバーのエントリポイント ├──  service-worker.ts └──  template.html ``` ### server - Webサーバーとして[[sirv]]を使っている - アプリケーションサーバーとして[[Polka]]を使っている ## いじってみる ### ナビゲーションバー `Nav.svelte`で実装されている。 ```html <nav> <ul> <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">home</a></li> <li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">about</a></li> <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches the blog data when we hover over the link or tap it on a touchscreen --> <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">blog</a></li> </ul> </nav> ``` ### 静的ファイルの画像表示 `static`ディレクトリからの相対パスで指定。 `<script>`で記述できないかは不明。 #unknown ```html <img alt="Success Kid" src="hoge.png"> ``` ## デプロイ用にビルドする https://sapper.svelte.dev/docs#Exporting ```shell npm run export ``` ```shell > Finished in 14.7s. Type npx serve __sapper__/export to run the app. ``` `__sapper__/export`配下をデプロイすればよい。 ### index.htmlができない `polka().use()`の第1引数にpathを指定したら`index.html`ができなくなった..。 #### 指定無しの場合 ```shell  .\__sapper__/export ├──  bitbucket │ └──  index.html ├──  client │ ├──  bitbucket.76d6b2a1.js │ ├──  client-e118e612.css │ ├──  client.d28d6378.js │ ├──  index-2d39ed90.css │ ├──  index.325867b5.js │ ├──  inject_styles.5607aec6.js │ ├──  legacy │ │ ├──  bitbucket.33573f80.js │ │ ├──  client-e118e612.css │ │ ├──  client.76e69425.js │ │ ├──  index-2d39ed90.css │ │ ├──  index.f7d3484f.js │ │ └──  inject_styles.fe622066.js │ └──  [email protected] ├──  favicon.png ├──  global.css ├──  index.html ├──  logo-192.png ├──  logo-512.png ├──  manifest.json ├──  service-worker-index.html ├──  service-worker.js └──  yuya.png ``` #### 指定ありの場合 サーバプログラムとしてビルドされていそう..。 ```shell  .\__sapper__/export ├──  client │ ├──  bitbucket.76d6b2a1.js │ ├──  client-e118e612.css │ ├──  client.d28d6378.js │ ├──  index-2d39ed90.css │ ├──  index.325867b5.js │ ├──  inject_styles.5607aec6.js │ ├──  legacy │ │ ├──  bitbucket.33573f80.js │ │ ├──  client-e118e612.css │ │ ├──  client.76e69425.js │ │ ├──  index-2d39ed90.css │ │ ├──  index.f7d3484f.js │ │ └──  inject_styles.fe622066.js │ └──  [email protected] ├──  favicon.png ├──  global.css ├──  logo-192.png ├──  logo-512.png ├──  manifest.json ├──  service-worker.js └──  yuya.png ``` crawlingでヒットしなかったのが原因 `sapper export --entry /svel-yuya-tool` としたらクローリングが正常に動作して動くようになった。 ```shell  .\__sapper__/export ├──  client │ ├──  bitbucket.76d6b2a1.js │ ├──  client-e118e612.css │ ├──  client.d28d6378.js │ ├──  index-2d39ed90.css │ ├──  index.325867b5.js │ ├──  inject_styles.5607aec6.js │ ├──  legacy │ │ ├──  bitbucket.33573f80.js │ │ ├──  client-e118e612.css │ │ ├──  client.76e69425.js │ │ ├──  index-2d39ed90.css │ │ ├──  index.f7d3484f.js │ │ └──  inject_styles.fe622066.js │ └──  [email protected] ├──  favicon.png ├──  global.css ├──  logo-192.png ├──  logo-512.png ├──  manifest.json ├──  service-worker.js ├──  svel-yuya-tool │ ├──  bitbucket │ │ └──  index.html │ ├──  client │ │ ├──  bitbucket.76d6b2a1.js │ │ ├──  client-e118e612.css │ │ ├──  client.d28d6378.js │ │ ├──  index-2d39ed90.css │ │ ├──  index.325867b5.js │ │ └──  inject_styles.5607aec6.js │ ├──  favicon.png │ ├──  global.css │ ├──  index.html │ ├──  manifest.json │ └──  yuya.png └──  yuya.png ``` デプロイの対象は `./__sapper__/export/svel-yuya-tool`