webpackで構築した開発環境をViteに移行する

webpackが開発終了らしいので話題のViteに開発環境を移行しました。

どうやっていいか検討つきませんがとりあえずinstallいたします。

$ npx install --save-dev vite

公式サイトのドキュメントを参考(https://ja.vitejs.dev/config/)にチャレンジいたします。webpack.common.jsと同じ階層にvite.config.jsファイルを作成しました。

// vite.config.js
export default {
  // 設定オプション
}

しかしながらよくわかりませんでした。

公式サイトのをガイド(https://ja.vitejs.dev/guide/)を参考に新規のプロジェクトを作り中身がどうなっているか確認いたしました。vite.config.jsの中身がこのようになっておりました。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

このまま自身のプロジェクトにコピペしました。モジュールもインストールします。

$ npm install --save @vitejs/plugin-react-swc

ここでお試しでコマンドを打ってみます。package.jsonのscriptsにコマンドを追加しました。

// package.jsonより
"scripts": {
    "vite": "vite"
}

$ npm run vite

なんとローカルサーバーが立ち上がりました！viteはローカルサーバー内蔵なのですね。すごいですね。

しかしながらlocalサーバーにアクセスすると404になっています。vite.config.jsにルートのindex.htmlがあるディレクトリを指定します。

こちらを参考にいたしました。(https://ja.vitejs.dev/config/shared-options.html)

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

// https://vitejs.dev/config/
export default defineConfig({
  root: "app", // 追加しました
  plugins: [react()],
})

index.htmlのscriptsをwebpackがbuildしたsrc="/index.js"と記述していましたが直接.tsxを読み込ませます。type="module"の付与も忘れないようにします。

// index.htmlより
<script type="module" src="/index.tsx"></script>

しかしながらlocalサーバーにアクセスするとエラーになってしまいました。

[plugin:vite:css] [postcss] Faild to find `.....

リセットcssの'~destyle.css'パスが読み取れない様です。

こちらを参考に(https://ja.vitejs.dev/config/shared-options.html#resolve-alias)vite.config.jsを編集しました。

export default defineConfig({
    root: "app",
    plugins: [
      react()
    ],
    resolve: {
      alias: {
        "~destyle.css": path.resolve(__dirname, "node_modules/destyle.css"),
      },
    },
  })

では再度サーバーを立ち上げます。エラーなしで無事にサーバーが立ち上がりました。

開発はこれで良いのですがbuildはどうなるのでしょうか。ここでお試しでコマンドを打ってみます。package.jsonのscriptsにコマンドを追加しました。

// package.jsonより
"scripts": {
    "vitebuild": "tsc && vite build"
}

$ npm run vitebuild

Typescriptのコンパイルで多数のエラーが出てしまいました。

よく見るとnode_modulesの型checkでエラーの様でしたのでtsconfig.jsonのcompilerOptionsに下記を追加しました。

// tsconfig.jsonより
"skipLibCheck": true,

再度buildします。

$ npm run vitebuild

無事にbuildされました。

最後にお試しで入れたpackage.jsonのscriptsを消して既存のものと入れ替えます

// package.jsonより
"scripts": {
    "dev": "vite"
    "build": "tsc && vite build"
}

最後にwebpack関連のファイルを削除して完了です。

webpackさん長い間おせわになりました。

最初の頃はloderってなんや?とちんぷんかんぷんで難しかったですが、サイトの速度が速くなり大変助かっておりました。感謝しております。

ありがとうございました。

以上viteへの移行でした

ここまでお読みくださりありがとうございました。