반응형
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 경고 제거
반응형
'Programming > Javascript' 카테고리의 다른 글
Netlify Serverless function 작성 (0) | 2021.06.17 |
---|---|
헤로쿠 백엔드, Netlify 프론트엔드 배포 (0) | 2021.06.15 |
Webpack template 프로젝트 만들기 (0) | 2021.05.20 |
캐러셀 만들기 - with Owl Carousel (0) | 2021.02.24 |
캐러셀 만들기 - with bxSlider (0) | 2021.02.24 |