Zenn
Open22

ParcelからViteにmigrationしてみる

React
TypeScript
Vite
parcel
emotion
たふみたふみ

こういう使ってるツールのmigration系は記事にするときにログを取ってないと難しいので，試験的にやってみる．

Context

今回の個人プロジェクトは，元々Parcel v1を使っていて，

  • v1のサポート終了
  • v2へ移行しようとしたが諸々がつらすぎた
    ため，Parcelを捨てる判断をした．
    もともとViteは気になっていたが，公式サイトに他のツールからのmigrationのことがまったく情報がないため，ぜひユーザーが増えるといいなという思いでこれを書く．

Goal

  • import React from 'react'を書かなくてすむようになること
  • TypeScript first
  • jsxの変換はemotionで行いたいこと
  • css propsに型が効くこと

Feasibility Study

  • Viteはtscではなくesbuildの変換のため，React v17の新しいjsx変換にはちゃんと対応していない
  • つまり，擬似的な変換である
  • 現状emotionはReact v17の新しいjsx変換にtsc側の問題で対応できていない (そのうち記事書きたい)
    • ここがParcelでもつまったところであり，結局 /** @jsx jsx */を外せなかった
  • Viteは今は単純にそれぞれのtsxファイルの一番上に差し込むものを指定して対応するっぽい
    • シンプルでわかりやすいので私は好き
  • CSS Propsの型定義を差し込むのはいけそう
  • yarn create vite --template react-tsで試しにサンプルを作ったところ，意外と設定ファイルなども少なく簡単にmigrationできそう？
たふみたふみ

ちなみに私は個人プロジェクトでは webpack.config.js と .babelrc は書きたくないために，逆にこういうめんどくさい事情になっているため皆さんは素直にwebpackとかの設定を書くといいと思います．

たふみたふみ

次に，別ディレクトリでyarn create vite --template react-tsで新規作成したプロジェクトから，ファイルを持ってくる

  • vite.config.ts
たふみたふみ

Parcelを削除

  • yarn remove parcel-bundler

Viteを追加

  • yarn add --dev vite @vitejs/plugin-react-refresh
たふみたふみ

vite.config.tsを以下に書き換え

import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from "@emotion/react"`,
  },
})

Ref: https://qiita.com/okoshi/items/e74d991c6feb57d338ef

たふみたふみ

src/ に index.html を設置してあるため，vite.config.ts に root: './src' を設定

たふみたふみ

開くと Uncaught SyntaxError: Cannot use import statement outside a module というエラーが出る

たふみたふみ

やはりjsxがredeclareであるというエラーが出るので，全ファイルから /** @jsx jsx */ を削除

たふみたふみ

そうするとeslintが怒るので，hookskitからeslintをコピーしてくる

  • .eslintrc.yml
  • .prettierrc.yml
  • tsconfig.json
たふみたふみ
eslint:Error:import/namespace:Resolve error: typescript with invalid interface loaded as resolver

このエラーが解決できない…

たふみたふみ

あれ，そういえばpath aliasの設定をviteに書いてなくて動いたな… これは tsconfig.jsonを読んでくれているという理解でいいのかしら

たふみたふみ

index.html を srcの中に入れておく場合，rootは srcにする必要があるが，これだと distがsrcの中に生成されてしまうので，

build: {
  outDir: '../dist',
},

をvite.config.tsに追加する必要がある

たふみたふみ

記事書くほどでもない気がするほど簡単だったのでこのまま残しておきます