개요
이번에 토이프로젝트를 제작하기 위해 Sapper + Typescript를 사용해보기로 결정했습니다.
원래는 Nuxt3를 써보려 했는데 아직 정식 릴리즈가 되지 않아 Sapper가 좀 더 끌리더라구요.
Sapper란?
Svelte에 서버 엔진을 붙인 프레임워크입니다.
React의 Next.js, Vue의 Nuxt를 생각해보시면 될 것 같아요.
설치
패키지 설치
npm
1
npm i --D svelte-preprocess typescript
yarn
1
yarn add -D svelte-preprocess typescript
tsconfig.json 추가
1
2
3
4
5
6
7
8
9
{
"include": ["src/**/*"],
"exclude": ["node_modules/*"],
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"types": ["svelte"]
}
}
rollup.config.js 편집
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ...
import autoPreprocess from "svelte-preprocess"; // add this
export default {
client: {
plugins: [
svelte({
preprocess: autoPreprocess(), // add this
// ...
server: {
plugins: [
svelte({
preprocess: autoPreprocess(), // add this
// ...
}),
// ...
d.ts 추가
1
declare module '*.jpg';