Svelte 5 Runes が発表されたので、現行の開発環境を構築してみる
今回の環境
TL;DR
1. プロジェクトの作成
npm create svelte@latest myapp
create-svelte version 5.1.0
┌ Welcome to SvelteKit!
│
(out)◇ Which Svelte app template?
│ ● SvelteKit demo app (A demo app showcasing some of the
│ features of SvelteKit - play a
word guessing game that works without JavaScript!)
│ ○ Skeleton project
│ ○ Library project
│
◇ Add type checking with TypeScript?
│ ● Yes, using JavaScript with JSDoc comments
│ ○ Yes, using TypeScript syntax
│ ○ No
│
◆ 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-svelte
✔ 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: cd myapp
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit"
(optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
2.Svelte のインストール
npm install
added 114 packages, and audited 115 packages in 23s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabi
3.Svelte の起動
npm run dev -- --open
> myapp@0.0.1 dev
> vite dev --open
Forced re-optimization of dependencies
VITE v4.4.9 ready in 264 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
4.ブラウザで確認