🌊
create-react-appを使わないReact、さようならWebpackこんにちはVite
はじめに
前回create-react-appを使わないReactにESLintとPrettier入れた。
プロジェクトが小さい内はWebpackでも気にならないが、肥大化してくるとビルドに時間がかかって面倒なので、WebpackからViteに乗り換える。
成果物はこちら。
環境
- vite: v4.1.4
※ 今回追加する主となるパッケージのバージョンのみ記載
手順
Webpackのアンインストールと設定ファイル削除
さようならWebpack。
$ yarn remove webpack webpack-cli webpack-dev-server html-webpack-plugin
$ rm webpack.config.js
Viteのインストール
こんにちはVite。
$ yarn add --dev vite @vitejs/plugin-react @types/node
- eslint
- https://github.com/eslint/eslint
- ESLintのコアパッケージ
Vite設定ファイルを作成する
vite.config.ts
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
// eslint-disable-next-line import/namespace
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
});
eslint-disable-next-line import/namespace を指定しているのは、viteをインポートする箇所で下記のエラーが発生するのを回避するため。他に回避方法があれば教えていただきたい。
Parse errors in imported module 'vite': parserPath is required
package.jsonを修正する
Viteは型チェックまではしてくれないので、そこはtscを使ってチェックする。
package.json
"scripts": {
- "start": "webpack-dev-server .",
- "build": "webpack .",
+ "dev": "vite",
+ "build": "tsc --noEmit && vite build",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"format": "prettier --write \"src/**/*.{ts,tsx}\""
},
index.htmlを移動し、修正する
Viteはエントリポイントとなる index.html をプロジェクト直下に意図的に配置しているらしい。それに合わせるため、 public/index.html ファイルを index.html （プロジェクト直下）に移動し、下記のように追記する。
index.html
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>React app</title>
</head>
<body>
<div id='root'></div>
+ <script type="module" src="./src/index.tsx"></script>
</body>
</html>
実行
$ yarn dev
おわりに
Viteは設定ファイルに記述する量が少なく、ビルド時間もWebpackと比べて早くて良い。
参考
Discussion