Svelte / Snowpack template 프로젝트 만들기

1. 프로젝트 생성

   npm init -y

 

2. 관련 package 설치

   npm i -D snowpack svelte @snowpack/plugin-svelte ( 템플릿 구성용 )

   npm i -D @snowpack/plugin-optimize ( html, js 난독화 및 최적화 )

   npm i -D @snowpack/plugin-babel  ( 바벨 )

   npm i -D @snowpack/plugin-sass  ( sass )

   npm i -D bootstrap@next ( 부트스트랩 )

   Svelt for VS Code 패키지 설치 ( 코드 하이라이트 )

 

3. package.json 파일 script 추가

"scripts": {
   "dev": "snowpack dev",
   "build": "snowpack build"
}

 

4. snowpack.config.js 파일 생성

module.exports = {
    mount: {
        public: '/',	// root 폴더
        src: '/dist'	// build된 결과 파일 위치
    },
    plugins: [
        '@snowpack/plugin-svelte',
        '@snowpack/plugin-optimize',  
        '@snowpack/plugin-babel',	//  ( 바벨 )
        '@snowpack/plugin-sass' 	//  ( Sass )
    ],
    alias: {
        '~':'./src'	// 경로 별칭
    },
    devOptions: {
        //port: 8080,
        open: 'none'	// 서버 새로 시작 시 브라우저 열기기능 막음
    }
}

5. index.html 파일에 스크립트 파일 경로 생성

<script type="module" src="/dist/main.js"></script>

6. App.svelte 파일 생성

<script>
    let name = 'hello Svelte!'
</script>

<h1>{name}</h1>

<style lang="scss">
	$color: red;
    h1 {
    	color: $color;
    }
</style>

 

 

7. main.js 파일 생성

import App from './App.svelte'

const app = new App({
	target: document.body
})

export default app

 

Build 최적화

8. optimize 패키지 설치

9. Babel 패키지 설치

10. Sass 패키지 설치

 

11. eslint 경고 제거