Sapperとは? TypeScriptとSassの導入方法
前回の記事で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できます。
<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が表示されます。
次に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が消えます。
http://localhost:3000 を確認すると 「HELLO TYPESCRIPT」へ変わってますね!
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 を確認しても色は変わっていません。
sassを入れてみます。
npm i sass --save-dev
先程書いた rollup.config.js にsassを追加します。
const preprocess = sveltePreprocess({
typescript: true,
sass: true, // 追加
// ...
});
http://localhost:3000 を確認すると「Have fun with Sapper!」部分の色が変わってます。
🎉
補足
環境構築する中でVSCodeエラーを解消したので共有しておきます。
・tsconfigでjson errorがでる
→typescriptをnpm global installすることで解決
・rollup.config.jsで設定を追加したのにindex.svelteでtype errorがでる
→VSCodeの拡張機能を「Svelte/James Birtles」から「Svelte Beta/Svelte」に変えたら解決
スキ頂けると嬉しいです〜