見出し画像

Sapperとは？ TypeScriptとSassの導入方法

sumi

前回の記事でSvelteの良さと環境構築の紹介をしました。今回はSvelteのフレームワークであるSapperについて紹介したいと思います。

Sapperとは

ReactでいうNext.js、Vue.jsでいうNuxt.js にあたるのがSapperです。SSR（サーバサイドレンダリング）が必要な場合は導入すると良いでしょう。

プロジェクトの作成


npx degit "sveltejs/sapper-template#rollup" sapper-ts-sample

sapper-template はSvelteの公式で用意されているテンプレートです。

作成できたらディレクトリに移動し、パッケージをインストールします。

cd sapper-ts-sample
npm install
npm run dev

http://localhost:3000/ へアクセスするとHello Worldできます。

スクリーンショット 2020-06-27 13.46.35

<script lang="typescript"> 対応ができるようにします。試しに 「src/routes/index.svelte」を下記のように修正します。

<script lang="typescript">
   export let title: string = "Hello TypeScript";
</script>

...中略

<!-- <h1>Great success!</h1> -->
<h1>{title}</h1>​

現状はこのようにErrorが表示されます。

スクリーンショット 2020-06-27 13.47.07

次にsvelte-processとtypescriptをインストールします。

npm i svelte-preprocess typescript --save-dev

PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug をサポートしています。

VSCodeを使っている場合

VSCodeを使っている場合はルートディレクトリに 「svelte.config.js」を作成して下記のように記述します。

// svelte.config.js
import sveltePreprocess from 'svelte-preprocess';
module.exports = {
 preprocess: sveltePreprocess({
   // ...svelte-preprocess options
 }),
 // ...other svelte options
};

VSCodeの拡張をインストールしてください。

JSからTSへ

ルートにtsconfig.jsonを追加します。

{
   "include": ["src/**/*"],
   "exclude": ["node_modules/*"],
   "compilerOptions": {
     "target": "es2018",
     "types": ["svelte"],
     "moduleResolution": "node",
     "outDir": "dist"
   }
}

rollup.config.jsに下記の記述を追加します。

import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
 typescript: true,
 // ...
});
export default {
 client: {
   plugins: [
     svelte({
       preprocess,
       // ...
     }),
 },
 server: {
   plugins: [
     svelte({
       preprocess,
       // ...
     }),
   ],
 },
};

再度 npm run dev を実行すると先程ビルド時に発生していたErrorが消えます。

スクリーンショット 2020-06-27 13.47.33

http://localhost:3000 を確認すると 「HELLO TYPESCRIPT」へ変わってますね！

スクリーンショット 2020-06-27 13.48.04

client.js/ server.jsをtypescript化するには、さらにモジュールを追加しないといけないので、やっていません。

CSSからSCSSへ

index.svelteを下記のように修正します。

<style lang="scss">
...中略
	figure {
		margin: 0 0 1em 0;
		figcaption {
			color: rgb(255,62,0);
		}
	}

下記のようなエラーがでます。もちろんhttp://localhost:3000 を確認しても色は変わっていません。

スクリーンショット 2020-06-27 13.48.13

sassを入れてみます。

npm i sass --save-dev

先程書いた rollup.config.js にsassを追加します。

const preprocess = sveltePreprocess({
	typescript: true,
	sass: true, // 追加
	// ...
});

http://localhost:3000 を確認すると「Have fun with Sapper!」部分の色が変わってます。

スクリーンショット 2020-06-27 13.49.06

🎉

補足

環境構築する中でVSCodeエラーを解消したので共有しておきます。

・tsconfigでjson errorがでる
→typescriptをnpm global installすることで解決
・rollup.config.jsで設定を追加したのにindex.svelteでtype errorがでる
→VSCodeの拡張機能を「Svelte/James Birtles」から「Svelte Beta/Svelte」に変えたら解決



スキ頂けると嬉しいです〜