Nuxt.js 2.9 がリリースされたぞ!
https://typescript.nuxtjs.org/icon.png
Vue を活用したユニバーサルアプリフレームワークの Nuxt.js の最新バージョン v2.9 がリリースされました。 以下にリリースノートを大雑把に日本語訳してみました。あまりなれてないので誤訳があったらごめんなさい 😭
⚠️ 重要事項
Node.js のサポートバージョンが v8.9.0 以降となりました ※ おそらく 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 への依存のリファクタ
🏡その他
省略
/icons/hr.icon
/icons/typescript.icon 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.icon Nuxt TypeScript という nuxtjs.org 配下の公式コンテンツとして取り扱われ、TypeScript の コード補完やコードの品質、型安全 を意識したより手堅い Nuxt.js による開発手法をサポートしていくようです。 移行ガイド
今回のリファクタリングによりパッケージの分割と廃止が行われたため、package.json に記録されている依存のパッケージの入れ替え、および設定の変更追従が必要となります。下記はマイグレーションガイドを簡単に翻訳したものです。
1. 依存パッケージの切り替え
@nuxt/typescript 非推奨となったので代替として @nuxt/typescript-build をインストールします。
code:sh
npm uninstall @nuxt/typescript
npm install -D @nuxt/typescript-build
2. 型定義参照元の切り替え
@nuxt/vue-app と @nuxt/config から参照していた型定義は @nuxt/types から参照するように変更します。
code:tsconfig.json
"compilerOptions": {
"types": [
"@nuxt/types"
]
}
3. @nuxt/typescript-build を nuxt.config.js のモジュール定義に追加
code:nuxt.config.js
export default {
}
4. @nuxt/typescript の設定は build.typescript に移動
code:nuxt.config.js
export default {
typescript: {
typeCheck: true,
ignoreNotFoundWarnings: true
}
}
下記のように書くこともできます
code:nuxt.config.js
export default {
buildModules: [
['@nuxt/typescript-build', {
typeCheck: true,
ignoreNotFoundWarnings: true
}]
]
}
5. 直接TypeScript実行したい場合 (オプション)
すべてをTypeScriptで書きたい皆様向けの設定として、@nuxt/typescript-runtime が用意されています。これをインストールすると nuxt-ts もしくは nuxts がコマンドとして使用できるようになり、設定ファイルは nuxt.config.ts とできる他、モジュールや serverMiddleware も TypeScript で配置し実行できるようになります。
code:sh
npm install @nuxt/typescript-runtime
code:package.json
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start"
"generate": "nuxt-ts generate"
}
まとめ
リリースノートを見る限り、scrollBehavior や devModules などの廃止と移行がある以外はあまり大きな変更はなさそうでした。TypeScriptでNuxt.jsを実装している場合は、移行ガイドに従ってパッケージの入れ替えが必要になりますのでサクッと追従してあげると良さそうです。最新と手元のバージョンの差が大きくならないように頑張っていきましょう! 👋