[Svelte] Svelte 기본설정

Svelte 공식문서

Svelte는 사용자 인터페이스를 구축하는 근본적인 새로운 접근 방식입니다. React 및 Vue와 같은 기존 프레임 워크는 브라우저 에서 작업의 대부분을 수행하는 반면 Svelte는 해당 작업을 앱을 빌드 할 때 발생하는 컴파일 단계 로 전환합니다 .

설치

공식 CLI가 있지만 공식홈페이지에서 예시로 주어진 템플릿을 clone 하여 사용하라고 합니다. sveltejs template github - roullup 이 템플릿은 rollup 라이브러리를 사용하고 있는데, 웹팩을 사용한 템플릿도 있으니 선택해서 다운받으면 된다. sveltejs template webpack github - webpack

npx degit sveltejs/template my-svelte-project

cd my-svelte-project

npm install

npm run dev

npm run dev를 실행하여 http://localhost:5000로 접속하면 아래와 같은 화면이 나온다

플러그인 설치

1-1 SCSS 설치

npm install --save-dev svelte-preprocess sass

1-2 SCSS 적용

rollup.config.js 파일 설정

import sveltePreprocess from 'svelte-preprocess';

export default {
  //...
  plugins: [
    //...
    preprocess: sveltePreprocess({})
  ]
}

.svelte SCSS 적용하기

<style lang="scss">
  main {
    text-align: center;
    & > h1 {
      color: #ff3e00;
    }
  }
</style>

2-1 Prettier 설치

Svelte 코드 컨벤션을 지키기 위해 Prettier 설치

npm i --save-dev prettier-plugin-svelte prettier

2-2 Prettier 설정

프로젝트 루트 경로에 .prettierrc 파일 만들기

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  //... 기타 옵션
}

3-1 Babel 설치

JavaScript 최신 문법을 사용하면서도 빌드된 결과물을 구형 브라우저에서도 호환되게 보여주기 위해서는 Babel 설정이 필요하다.

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

3-2 Babel 설정

svelte babel 설정

rollup.config.js 파일 수정

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

4-1 postcss & tailwindCSS 설치

npm install -D tailwindcss autoprefixer postcss

npm install @tailwindcss/ui

4-2 postcss & tailwindCSS 설정

tailwind.config.js tailwind css 설정파일

const production = !process.env.ROLLUP_WATCH; // or some other env var like NODE_ENV

module.exports = {
  future: { // for tailwind 2.0 compat
    purgeLayersByDefault: true, 
    removeDeprecatedGapUtilities: true,
  },
  plugins: [ require('@tailwindcss/ui') ],
  purge: {
    content: [ "./src/**/*.svelte", "./src/*.svelte" ], 
    enabled: production // disable purge in dev
  },
};

rollup.config.js 파일 수정

plugins: [
  svelte({
    //...
    preprocess: sveltePreprocess({
      postcss: {
        plugins: [
          require("tailwindcss"), 
          require("autoprefixer")
        ],
      },
    })
  })
]

App.svelte 파일 수정

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

5. VSCode Extension

VSCode 확장프로그램 Svelte for VS Code 검색해서 설치하기