2022.5.22
Vite + React + TypeScript でプロジェクトを立ち上げる
Viteでプロジェクトを作成
terminal_____none_____yarn create vite
プロジェクト作成時に聞かれるオプションを聞かれます。
今回はReact + TypeScriptでプロジェクトを作成するのでそのように回答します。
terminal_____none_____? Select a framework: react
? Select a variant: react-ts
ESLintとPrettierを追加してyarn
package.json_____json_____{
"name": "{project-name}",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"format": "prettier --write ."
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"typescript": "^4.6.3",
"vite": "^2.9.9",
"prettier": "^2.5.1",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"@typescript-eslint/parser": "^5.12.0",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.4.0"
}
}
index.htmlをsrcディレクトリに移動しvite.config.tsを更新
typescript_____vite.config.ts_____import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
base: './',
root: './src',
build: {
outDir: '../public', // デフォルトでは root で指定したディレクトリ / root からの相対パスで指定
emptyOutDir: true, // root 外に outDir を設定する場合は指定
},
server: {
open: true, // yarn dev でブラウザが自動で開かれる
},
plugins: [react()],
})
起動してみる
terminal_____none_____yarn dev
yarn run v1.22.11
$ vite
vite v2.9.9 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 921ms.
デフォルトのApp.tsxにあるbuttonタグをstateと一緒にコンポーネントとして切り出し、
わかりやすくonClickで+2するようにだけ変更し、
そのまま呼び出して更新することでホットリロードを試してみる。
tsx_____Button.tsx_____import { useState } from 'react'
import './App.css'
function Button() {
const [count, setCount] = useState(0)
return (
<button type='button' onClick={() => setCount((count) => count + 2)}>
count is: {count}
</button>
)
}
export default Button
tsx_____App.tsx_____import logo from './logo.svg'
import './App.css'
import Button from './Button'
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>Hello Vite + React!</p>
<p>
<Button />
</p>
<p>
Edit <code>App.tsx</code> and save to test HMR updates.
</p>
<p>
<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
Learn React
</a>
<a className='App-link' href='https://vitejs.dev/guide/features.html' target='_blank' rel='noopener noreferrer'>
Vite Docs
</a>
</p>
</header>
</div>
)
}
export default App
保存した瞬間にVS Codeのターミナルに [vite] hmr update /App.tsx
とだけ表示されました。
ターミナルに building... xx% のような表示が出ることもなく、瞬時に終わりました。
ブラウザでボタンをクリックするとカウントは2ずつ増えるようになっていたので、一瞬で反映されています。
このあとは src ディレクトリ配下で普段どおり開発を進められます。
Vite は型チェックを行いませんが、開発中にリアルタイムに型エラーを確認したいので、package.json
に "watch": "tsc -w"
を追加し yarn dev
しつつ別タブで yarn watch
することにします。
これでより良い開発体験になりそうです。