Svelte(Typescript) 시작

시작

• Svelte를 Typescript로 시작하는 방법에 대하여 알아보기로 한다.
• 다양한 방법으로 Svelte프로젝트를 생성할 수 있지만, 방법의 대부분이 Svelte Template Project를 git에서 가져와서 빌드를 세팅하는 방식으로 프로젝트를 생성한다.
  • 공식 홈페이지

Svelte <3 TypeScript

• 공식 홈페이지에서 제공되는 방법으로 설명하도록 한다.

필요한 것

• nodejs
• npx
• vscode, 혹은 개발자가 필요한 에디터
• npx의 경우 필수는 아니지만, 각종 패키지를 설치하는데 상당히 편하기 때문에 npx를 사용하는 것을 추천한다.

기본 프로젝트 설정

npx degit sveltejs/template svelte-typescript-app

• degit으로 git에 있는 svelte typescript 기본 템플릿 소스를 다운받는다.
• degit은 git clone과 같은데 git 저장 정보를 뺀 깔끔한 소스만 다운로드 받게 해준다.
• 다운 받은 소스 디렉토리로 들어간 후 아래와 같이 node로 setupTypeScript.js로 실행시켜 typescript프로젝트를 완성 시킨다.

cd svelte-typescript-app
node scripts/setupTypeScript.js

• 아래는 이미지는 'setupTypeScript.js'를 실행 시키기 전이다. 실행 시키고 난 후에는 몇가지 파일이 삭제되고, 몇가지 파일이 생성됨을 을 확인 할 수 있다.

 

• setupTypeScript.js를 실행 시키면 아래와 같이 타입스크립트로 잘 변경 되었다고 나온다.
• 아래와 같이 Converted To Typescript라는 문구가 나오

 node ./scripts/setupTypeScript.js 
Converted to TypeScript.

You will need to re-run your dependency manager to get started.

• tsconfig.json 이 생성되고, main.js가 main.ts로 변경됨을 확인 할 수 있다. 그리고 script 폴더는 삭제 된다.
• 일단 모든 node project의 기본인 npm install 커맨드로 필요한 package들을 완전히 설치하자
• 이제 package.json을 보자
• ./npm run dev로 프로젝트를 실행 시켜 보자
  • 개발 단계에서는 dev로 실행 시켜야 소스가 변경할때 마다 다시 빌드한다.
  • rollup -c라는 특이한 커맨드를 볼 수 있는데, svelte는 앞서 이야기 한것 과 같이 라이브러리가 아니라, 컴파일을 하는 방식의 framework라고 햇다. 컴파일 하는 것이다. -w는 watch 옵션으로, 파일 변경을 watch하고 있다거 변경 될때 마다 다시 컴파일 하는 방식이다.
  • rollup은 rollup.config.js에 설정에 따라 여러 가지 조정을 할 수 있는데, 이 부분은 나중에 자세하게 다루도록 한다.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

• 이제 browser에서 http://localhost:5000 을 주소 창에 치면
• 아래와 같은 hellow world화면을 만나 볼 수 있다.