Nuxt.js 2.9 がリリースされたぞ！

Nuxt TypeScript https://typescript.nuxtjs.org/

Vue を活用したユニバーサルアプリフレームワークの Nuxt.js の最新バージョン v2.9 がリリースされました。

以下リリースノートを翻訳していきます。あまりなれてないので誤訳があったらごめんなさい 😭

https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0

⚠️ 重要事項

• Node.js のサポートバージョンが v8.9.0 以降となりました
• TypeScript のサポートが外部化されました
  • ※ おそらく nuxt と @nuxt/typescript の分離が進んだということだと思います
  • 公式ガイド と マイグレーションガイド を参照ください
• vue-meta が 2.0.0 に更新されました。対応するリリースノートを参照してください。
• scrollBehavior オプションが非推奨となりました PR#6055
  • app/router.scrollBehavior.js を代わりに使用してください。
• devModules オプションが非推奨になりました。 PR#6203
  • buildModules を代わりに使用してください。

🐞 バグフィックス

• General
  • modulepreload 警告の修正
  • QuietMode の際のビルドエラーで例外を投げる
  • ModernMode のための Babel CoreJS のサポート
  • Babel Pollyfill が無効化できない件
• Renderer
  • Safari 10 における nomodule スクリプトの完全な読み込み
• CLI
  • nuxt と nuxt-edge が両方インストールされているときの対策
• vue-app
  • Hash Navigation での triggerScroll の発火
• vue-renderer
  • createRenderer の実行前に render:resourcesLoaded を呼び出す機能の追加
  • キャッシュの変更を防ぐための SPAメタ情報の複製
• Webpack
  • CSSの展開が HMR と Source-map を破壊する問題の対策

🚀 新機能

• CLI
  • Option が Export されるようになった
• server
  • renderAndGetWindow に loadingTimeout と他のパラメータも渡せるようになった
• Webpack
  • build.transpile に関数をエントリを追加できる様になった
• vue-app
  • $nuxt.refresh が追加
  • ビルドインジケータの表示に WebSocket の代わりに EventSource を使用するようになった
  • scrollBehavior から app/router.scrollBehavior.js への移行
  • <no-ssr> のエイリアスとして <client-only> の追加
  • ローディングインジケータのカスタマイズができるようになった
  • asyncData と fetch で $nuxt.refresh() が利用できるようになった
  • Option が Export されるようになった
  • watchQuery をサポート
• vue-renderer
  • V1系の互換性のためCSPオプションを追加
  • SSR時点でのbodyタグの前後へのタグの差し込みのサポート
• typescript
  • TypeScript サポートのための仕組みの外部パッケージ化
  • 後述します

💅 リファクタリング

• config
  • devModules は buildModules にリネームされました
• babel-preset-app
  • babel-plugin-dynamic-import-node の削除
• Webpack
  • トランスパイルの正規化がシンプルになった
• General
  • @nuxt/eslint-config v1 への依存のリファクタ

🏡その他

• 省略

---

TypeScript サポートの外部パッケージ化について

TypeScript 大好きクラブ会員として気になったので少し紹介します。

今回 Nuxt.js 2.5 からサポートされた TypeScript のサポートのパッケージ分割がすすみ、@nuxt/typescript で提供されていた機能が Nuxtのビルド時に効果を発揮する @nuxt/typescript-build、 型定義を提供する @nuxt/types、そして、実行時に TypeScript を評価できるようにする @nuxt/typescript-runtime に分割されました。

これは Nuxt.js 2.9 のリファクタリングの一環によるもので、主にモジュールが Nuxt.Builder を拡張できる機能や、WebpackのWarningFix プラグインのフィルタをカスタマイズすること、あるいは Nuxt が内包する BabelLoader の設定を拡張したり、ts-loader で tsx をハンドリングしたりするシーンに置いてより柔軟に便利にする目的があるようです。(https://github.com/nuxt/nuxt.js/pull/5854))

おそらく、モジュールが分割されたことで、ゴリゴリカスタムしたいシーンなどでもより便利になったということでしょう。

また以降は Nuxt.js の TypeScript サポートは Nuxt TypeScript という nuxtjs.org 配下の公式コンテンツとして取り扱われ、TypeScript の コード補完やコードの品質、型安全 を意識したより手堅い Nuxt.js による開発手法をサポートしていくようです。

現在確認できる情報として、分割されたパッケージについての説明や、詳しい設定方法の他、サンプルとして Object API、 Class API、 Function API それぞれでの実装方法が例示されています。(なんて呼んであげたらいいかわからなかったのでオブジェクト記法とかクラス記法とか個人的には呼んでたのですが、正式な呼び方ができたようで一安心。)

移行ガイド

今回のリファクタリングによりパッケージの分割と廃止が行われたため、package.json に記録されている依存のパッケージの入れ替え、および設定の変更追従が必要となります。下記はマイグレーションガイドを簡単に翻訳したものです。

1. 依存パッケージの切り替え

• @nuxt/typescript 非推奨となったので代替として @nuxt/typescript-build をインストールします。

npm uninstall @nuxt/typescript
npm install -D @nuxt/typescript-build

2. 型定義参照元の切り替え

• @nuxt/vue-app と @nuxt/config から参照していた型定義は @nuxt/types から参照するように変更します。

"compilerOptions": {
  "types": [
     "@nuxt/types"
  ]
}

3. @nuxt/typescript-build を nuxt.config.js のモジュール定義に追加

export default {
  buildModules: ['@nuxt/typescript-build']
}

4. @nuxt/typescript の設定は build.typescript に移動

export default {
  typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
  }
}

下記のように書くこともできます

export default {
  buildModules: [
    ['@nuxt/typescript-build', {
      typeCheck: true,
      ignoreNotFoundWarnings: true
    }]
  ]
}

5. 直接TypeScript実行したい場合 (オプション)

すべてをTypeScriptで書きたい皆様向けの設定として、@nuxt/typescript-runtime が用意されています。これをインストールすると nuxt-ts もしくは nuxts がコマンドとして使用できるようになり、設定ファイルは nuxt.config.ts とできる他、モジュールや serverMiddleware も TypeScript で配置し実行できるようになります。

npm install @nuxt/typescript-runtime

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "start": "nuxt-ts start"
  "generate": "nuxt-ts generate"
}

まとめ

リリースノートを見る限り、scrollBehavior や devModules などの廃止と移行がある以外はあまり大きな変更はなさそうでした。TypeScriptでNuxt.jsを実装している場合は、移行ガイドに従ってパッケージの入れ替えが必要になりますのでサクッと追従してあげると良さそうです。最新と手元のバージョンの差が大きくならないように頑張っていきましょう！ 👋

from: Scrapbox