先日Nuxt2.15.0がリリースされました。せっかくなので開発中のNuxtプロジェクトでバージョンアップ作業に取り組んでみたので紹介します。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
まとめ
今回は、依存パッケージが少なかったのでバージョンアップも比較的簡単でした。これでしばらく触ってテストしてみようと思います。こまめにバージョンアップは必要ですね。お疲れ様でした。
