このブログを作成した当時 2.8.1
だった Nuxt.js ですが 2.9.2
までupdateされており、非公式にTypescriptを使っていたのも公式にTypescriptのサポートが入っています。
今回は重い腰をあげて update をしました。
公式のupgrade方法のページは以下です。
https://ja.nuxtjs.org/guide/upgrading/
内容としては、詳細はリリースノートを見てね。package.jsonのnuxtの部分のバージョンを書き換えて、yarn.lock, node_modules を消して yarn し直してね。
という感じです。合わせて、 yarn outdated
コマンドで他の依存ライブラリのバージョンも見直してみたら?って感じでした。
またTypescriptも入れていたので公式にサポートされたライブラリへの差し替えも行います。
そちらはリリースノートに書いてあります。
https://ja.nuxtjs.org/guide/release-notes#v2.9.0
NuxtTypescript公式のmigrationガイドを見てくれと、それがこちら
https://typescript.nuxtjs.org/migration.html@nuxt/typescript
-> @nuxt/typescript-build
へ切り替える
tsconfig.json の types に "@nuxt/types"
を追加
nuxt.config.jsに以下を追加
export default { buildModules: ['@nuxt/typescript-build'] }
というわけで早速やってみました。
全体差分はgithubのPRにあります。
https://github.com/astapi/astapi.dev/pull/1/files
nuxt のバージョンを 2.9.2 に更新@nuxt/typescript
を削除し yarn add --dev @nuxt/typescript-build
tsconfig.json nuxt.config.ts を修正し yarn dev
を叩きます。
すると、大量のエラーが出ました。
どうも typescript として build されていなく js にはない構文だとエラーが出ています。
@nuxt/typescript-runtime
が必要なようで yarn add @nuxt/typescript-runtime
で入れます。
その後、 package.json のコマンドを修正します。"dev": "nuxt"
"dev": "nuxt-ts"
他のコマンドも同様に nuxt -> nuxt-ts に変更します。
更に、今まで nuxt.config を typescript で記述していたの際にimport NuxtConfiguration from '@nuxt/config'
を使っていました。
今回これを @nuxt/types
から import する必要があります。import { Configuration } from '@nuxt/types'
に書き換えて NuxtConfigurationを指定していた箇所も修正。
無事これでビルドが通りました。
yarn outdated
して出てきた内容をみて他のライブラリもアップデートしました。差分はこちら
https://github.com/astapi/astapi.dev/pull/2