先日Nuxt2.15.0がリリースされました。せっかくなので開発中のNuxtプロジェクトでバージョンアップ作業に取り組んでみたので紹介します。Nuxt2.15.0については、下記にもまとめていますので、こちらも合わせて参照してください。

Nuxt2.15.0がリリースされました。

環境について

今回バージョンアップするプロジェクトでは、typescript、tailwindcssを利用しています。今回、バージョンするプロジェクトのCI環境では、次のようなチェックを行っています。

  • ESLintによる解析
  • Jestを利用した単体テスト
  • Cypressを使ったテスト

今回はバージョンアップとそれに伴う変更の取り込み(typescriptの変更、postcss8の取り込みを行いtailwindcssのアップデート)を行います。

Nuxt本体のアップデート

バージョンアップのNuxt2.14.6でした。NuxtJSの公式サイトで紹介されている手順に沿って行います。今回

  • package.jsonのnuxtを2.15.0に書き換える
  • node_modulesを削除
  • yarnコマンドを実行

こちらでNuxtバージョンは簡単に完了します。

現状のプラグインの状況を確認

yarn outdatedを使って古いパッケージを確認します。

利用しているパッケージが少ないので、ESlint, tailswindcssに絡むpostcss関連のプラグインです。

eslint関連のパッケージアップデート

yarn lint等で実行するとtypescriptのバージョンが”4.1.0″までしかサポートされていないというエラーになったので、ESlint関連のプラグインをアップデートします。
こちらは、yarn upgrade-interactive --latestを使ってアップデートを行って行きます。最後にESLintをかけてみてeslintが実行できればバージョン完了です。

postcss8へのアップデートしてtailwindcssをアップデート

こちらは、support postcss v8 with explict postcss installationをベースに作業すると簡単です。紹介されていた方法でアップデートをかけます。


$ yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

postcss-import@14.0.0が最新なので、こちらもアップデートをかけておきます。
※postcss-loaderも5.00系が出ているのですがこちらは、アップデートは諦めました。

これでtailwindcssをアップデートします。


$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

まとめ

今回は、依存パッケージが少なかったのでバージョンアップも比較的簡単でした。これでしばらく触ってテストしてみようと思います。こまめにバージョンアップは必要ですね。お疲れ様でした。