svelte-typescript

svelte-typescript 개발 도입 문서

Install packages

$ yarn

Start development server

$ yarn serve

Build for production

$ yarn build

Sverte 설치

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
$ npm i
$ npm run dev

package 추가 문서

TypeScript

초기 세팅부터 typescript 녹이다 삽질을 너무 많이함.

rollup설정을 제대로 했는데 ts import 시 파일을 찾질 못함...원인 못찾...

결국 여기서 가져옴...

$ npm i --save-dev rollup-plugin-typescript2
$ npm i --save-dev typescript
$ touch tsconfig.json

roullup.config.js 설정

import typescript from "rollup-plugin-typescript2";
import typescriptCompiler from "typescript";

export default {
    ...
    plugins: [
        typescript({ typescript: typescriptCompiler })
    ]
    ...
};

Svelte Preprocess

A Svelte preprocessor with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.

$ npm i --save-dev svelte-preprocess

Router 추가

svelte-spa-router: Svelte3 전용이며 SPA에 최적화 되어있다. SEO 향상이 필요하다면 SAPPER로 접근한다.

SPA, SSR 참고 문서 : SPA와 SSR의 장단점 그리고 Nuxt.js

$ npm i --save-dev svelte-spa-router

UI Framework 'sveltestrap' 추가

svelte-material-ui를 추가하려했으나 아직 TS를 지원하지 않아 적용하는데 번거로움. 간단한 UI만 필요하기때문에 부트스트랩에 녹인 sveltestrap 을 적용함.

package.json

$ npm i --save bootstrap sveltestrap

App.svelte 또는 index.html css 추가

<svelte:head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</svelte:head>

Css Sass 추가

전에 분명 'svelte-preprocess' 가이드에 따라서 rollup.comfig에 추가했는데 scss가 안먹힘.

구글 검색에서 Svelte / Sapper with Sass!문서를 보고 적용함.

npm i -D svelte-preprocess autoprefixer node-sass

- style
<style lang="scss"></style>

- rollup.config.js
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});
...
export default {
  client: {
    plugins: [
      svelte({
        // ...
        preprocess, // <-- ADD THIS LINE
      }),
  },
  server: {
    plugins: [
      svelte({
       // ...
        preprocess, // <-- HERE TOO
      }),
    ],
  },
};

---

TODOLIST

• Typesciprt 적용
• router ts Error Fixed
• UI Framework 적용
• SvelteGuide 페이지 작성
• AWS API 연동
• Build 체크
• README 문서 정리

모듈 import

ts 파일에서 모듈 import 할때 모듈을 찾지 못함: 파일 호환성 이슈

차후 @type/* 업데이트 시 확인 필요.

참고 문서 :

• 타입스크립트 컴파일러가 모듈 타입 선언을 참조하는 과정
• 타입스크립트의 네임스페이스와 모듈