[SVELTE] 프로젝트 생성

우선 Svelte를 사용하려면 node를 설치해야 한다.

https://nodejs.org/en/ << 해당 링크를 이용하여 node를 설치한다.

 

Svelte 공식 CLI 공식 홈페이지가 있지만, 편하게 개발세팅을 하기 위해

https://github.com/sveltejs/template << Svelte 템플릿 코드를 복사하여 사용하거나

아래와 같이 입력하여, 템플릿을 가져와도 상관없다.

npx degit sveltejs/template svelte-project

cd svelte-project

npm install

npm run dev

http://localhost:8080 에 접속하면, 

스벨트 메인페이지

위와 같이 프로젝트가 생성되었다.

 

스벨트 라우팅

npm install --save svelte-routing

 

스벨트 PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug 같은 전처리기 컴파일 지원 Dependency

npm install node-sass svelte-preprocess --save

rollup.config.js

import autoPreprocess from 'svelte-preprocess';

plugins: [
		svelte({
			//...
			preprocess: autoPreprocess(),
		}),
        //...

위와 같이 플러그인 옵션을 설정해준다.

그러면, <style> 에 lang="scss"를 사용할 수 있다.

 

코드 컨벤션을 위한 디펜던시 Prettier

npm install --save-dev prettier-plugin-svelte prettier

이 후, 기본 설정이 있지만, 파일을 생성하여, 아래와 같이 커스텀 설정을 할 수 있다.

.prettierrc

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  //추가내용
}

 

Javascript 최신 사용과 동시에 구형 브라우저 호환을 위한 Babel

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining

추가 옵션 설정은

rollup.config.js

import autoPreprocess from 'svelte-preprocess';

plugins: [
		svelte({
			//...
			preprocess: autoPreprocess({
            	babel: {
                  presets: [
                    [
                      "@babel/preset-env",
                      {
                        loose: true,
                        modules: false,
                        targets: {
                          esmodules: true,
                        },
                      },
                    ],
                  ],
                },
                plugins: ["@babel/plugin-proposal-optional-chaining"],
            }),
		}),
        //...

로 Babel 설정을 preprocess 안에 추가한다.

 

스크립트 내에서 CSS 파일을 읽을 수 있게 해주는 플러그인 rollup-plugin-postcss

npm install rollup-plugin-postcss -D

rollup.config.js

import postcss from "rollup-plugin-postcss";

export default {
  // ...
  plugins: [
    // ...
    postcss(),
  ],
};

 

이외에 개발을 도와줄 VSCode 확장프로그램

Svelte for VS Code

 

구글 확장프로그램인

Svelte Devtools

 

위와 같이 설정하면, 프로젝트 진행하기 위한 준비는 완료 !