Svelte 시작하기

스벨트 템플릿 만들기

Clone받기

npx degit sveltejs/template svelte-app  

패키지 설치 및 실행

npm install
npm run dev

Svelte 템플릿 구조

- public/
    - build/
        - bundle.js
        - bundle.css
    - index.html
    - global.css
- src/
    - App.svelte
    - main.js
- package.json
- package-lock.json
- rollup.config.js

Rollup.config.js 는 Webpack과 같이 파일들을 watch 하며 코드 컴파일 설정을 담당한다.
그리고 코드를 컴파일하여 번들 파일을 산출해내는 역할을 한다.

(기본적으로 서버는 localhost 요청에만 응답하는데, 다른 컴퓨터와의 연결도 허용하고 싶다면
package.json에서 sirv command에 --host 0.0.0.0. 옵션을 추가하면 된다.)

 

• public은 마지막 production 코드와 같이 번들링된 Output 파일들이 들어갈 곳이다. 즉 배포를 위한 파일들이 들어간다. 브라우저에 serving하기 위한 index.html이라던지 style 파일들도 여기에 들어간다.
• src는 svelte 컴포넌트 파일들과 svelte 컴포넌트를 묶어서 document.body에 넣어줄 main.js 파일이 들어간다. (우리가 작성 할 99%의 코드들이 여기에 속할 것이다.)