CSA라고 해야하나 React는 CRA를 제공하는 것처럼 svlete도 프로젝트 생성 시 기본 구성을 제공하고 있다.
나는 데모 프로젝트를 생성했고 아래와 같이 실행된다.
// 명령어를 실행한다.
npm create svelte@latest .
create-svelte version 3.1.2
┌ Welcome to SvelteKit!
│ // 프로젝트 생성할거면 엔터치면 됨
◇ Where should we create your project?
│ (hit Enter to use current directory)
│
│ // 이거는 내가 이미 빈 프로젝트를 생성한 상태에서 설치하려고 나오는 문구이다.
◇ Directory not empty. Continue?
│ Yes
│
│ // 이 때 제안해주는 방법이 세 가지이다.
│ // 데모 프로젝트로 생성, 기본 라이브러리가 있는? 프로젝트 생성, 빈 프로젝트로 생성
◇ Which Svelte app template?
│ SvelteKit demo app
│
│ // 타입체크를 할거냐고 물어보는데 이 때 제안도 세 가지로 해줌
│ // 타입스크립트 사용, 자바스크립트 주석을 사용한 타입 확인, 안함
│ // 내 기준에서 타입스크립트까지 하는건 일정상으로도 어려울 것 같아서 자바스크립트 주석을 사용하기로 함
◇ Add type checking with TypeScript?
│ Yes, using JavaScript with JSDoc comments
│ // 옵션으로 선택할 항목을 제안해준다. eslint, prettier, playwright, vitest
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
✔ Type-checked JavaScript
https://www.typescriptlang.org/tsconfig#checkJs
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
https://playwright.dev
✔ Vitest
https://vitest.dev
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
// 생성 후에 실행 순서를 알려준다.
Next steps:
1: npm install (or pnpm install, etc)
2: git init && git add -A && git commit -m "Initial commit" (optional)
3: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
npm notice
npm notice New minor version of npm available! 9.2.0 -> 9.6.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.1
npm notice Run npm install -g npm@9.6.1 to update!
npm notice
// 위에서 알려주는대로 npm install을 실행한다.
npm install
npm WARN deprecated @types/sass@1.45.0: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
added 206 packages, and audited 207 packages in 24s
34 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 9.2.0 -> 9.6.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.1
npm notice Run npm install -g npm@9.6.1 to update!
npm notice
// install 후 프로젝트를 실행한다.
npm run dev -- --open
> project@0.0.1 dev> vite dev --open
// 접속 url 정보와 참고할 정보를 알려준다.
Forced re-optimization of dependencies
VITE v4.1.4 ready in 1458 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
3:30:38 PM [vite-plugin-svelte] ssr compile done.
package files time avg
project 5 62.6ms 12.5ms
