ParcelからViteにmigrationしてみる

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

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

まずは今，Parcelでbuild可能なことを確認．
(一旦react-snapを削除)

次に，別ディレクトリで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

これで一旦動くか確認 (yarn vite)

動かない

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

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

index.htmlのscriptに，type="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

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

今までは https://www.npmjs.com/package/eslint-plugin-import を使用するのに parcelを使っていたが，今回はtypescriptに変更する必要がありそう

これを導入して解決！
https://github.com/alexgorbatchev/eslint-import-resolver-typescript

動いた！！！！

最後に，tsconfigに

    "types": ["vite/client", "@emotion/react/types/css-prop"],

を追加

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

意外とあっさり終わってしまった

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

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

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

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

何もせずにNetlifyも通った！！！！

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