あすたぴ.dev

Nuxt2.8系から2.9系へのupdateと公式Typescriptサポート

Nuxt.js
Typescript
2019/09/30 01:14:49

このブログを作成した当時 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

Copyright © astapi