📜2022-12-15 Viteをv2からv3,v4へとバージョンアップ

[[Vite2]]のプロジェクトがあるので、[[Vite3]]はもとより最新の[[Vite4]]までアップデートしてみる。 ## アップデート対象 ```console (*) @vitejs/plugin-vue devDep 2.2.0 ❯ 4.0.0 https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme (*) vite devDep 2.8.3 ❯ 4.0.1 https://github.com/vitejs/vite/tree/main/#readme >(*) vue-tsc devDep 0.29.8 ❯ 1.0.13 https://github.com/johnsoncodehk/volar#readme ``` [[npm-check]]でインストール。 ## まずは動かしてみる公式のリリースノートを参考に。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">vite/CHANGELOG.md at v3.0.0 · vitejs/vite</p> </div> <div class="link-card-description"> Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an ac... </div> </div> <img src="https://opengraph.githubassets.com/5ceace30c2a25b623b14b145978d2f7e101089824c0372fef5ac37ef0796f439/vitejs/vite" class="link-card-image" /> </div> <a href="https://github.com/vitejs/vite/blob/v3.0.0/packages/vite/CHANGELOG.md#300-2022-07-13"></a> </div> ```console $ npm run dev VITE v4.0.1 ready in 851 ms ➜ Local: http://localhost:5173 ➜ Network: use --host to expose ➜ press h to show help ``` ### ポート番号ポート番号は3000でなくなった。v3の変更点ぽい。 > The default dev server port is now 5173, with the preview server starting at 4173. ### ずっとくるくるしている必要なものをインストールしているぽい。すべてが終わったら普通に起動した。 ## 警告の対応こんな感じで[[Node.js]]でしか使えないModuleを使っている場合、ブラウザで動かないぞという警告が出る。 ```console Module "source-map-js" has been externalized for browser compatibility. Cannot access "source-map-js.SourceMapConsumer" in client code. Module "path" has been externalized for browser compatibility. Cannot access "path.dirname" in client code. Module "url" has been externalized for browser compatibility. Cannot access "url.fileURLToPath" in client code. ``` [[PostCSS]]と[[sanitize-html]]などが起因。[[Vite3]]ではエラーになっており問題だった。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Error: Module "path" has been externalized for browser compatibility. Cannot access "path.dirname" in client code. · Issue #9200 · vitejs/vite</p> </div> <div class="link-card-description"> Describe the bug I am having this issue in my app since upgrading to Vite 3. I am still having the i... </div> </div> <img src="https://opengraph.githubassets.com/49c03a6ccb1e2bfa665083619e626312b27b982634226d4044191f7ba38d1b4a/vitejs/vite/issues/9200" class="link-card-image" /> </div> <a href="https://github.com/vitejs/vite/issues/9200"></a> </div> エラーを警告に格下げするプルリクがすぐにマージされている。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">feat: relax dep browser externals as warning by bluwy · Pull Request #9837 · vitejs/vite</p> </div> <div class="link-card-description"> Description I believe this fixes #9200. I haven't tested it's repro but this PR likely fixes it. The... </div> </div> <img src="https://opengraph.githubassets.com/9eb1b0a1ff722d689bc7a872f822dadef6284e33e5d6c55a517f72a28203ee07/vitejs/vite/pull/9837" class="link-card-image" /> </div> <a href="https://github.com/vitejs/vite/pull/9837"></a> </div> 恐らくこの状態でずっと来ているため警告は出続けている。警告を無視するにはちょっと工夫しないと無理そう...。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Add an option to ignore postcss warnings · Issue #9597 · vitejs/vite</p> </div> <div class="link-card-description"> Description I want to disable unnecessary postcss warning in the console, like this: [vite:css] C:\p... </div> </div> <img src="https://opengraph.githubassets.com/3b59cf3ca41b6b0cbf88e2c565f4c57a6f23a71d8bc0e825e3bf2e5f0e476e73/vitejs/vite/issues/9597" class="link-card-image" /> </div> <a href="https://github.com/vitejs/vite/issues/9597"></a> </div> [[PostCSS]]のエラーはちょっとうるさいので↑を試してみたけどダメだった。気になりすぎるけど放置で。。