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

[![Image](https://typescript.nuxtjs.org/assets/logo.svg)](https://typescript.nuxtjs.org/assets/logo.svg)
Nuxt TypeScript https://typescript.nuxtjs.org/

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

以下リリースノートを翻訳していきます。あまりなれてないので誤訳があったらごめんなさい 😭<br>
[https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0)<br>

### ⚠️ 重要事項
 - Node.js のサポートバージョンが v8.9.0 以降となりました
 - TypeScript のサポートが外部化されました
   - ※ おそらく nuxt と @nuxt/typescript の分離が進んだということだと思います
   - [公式ガイド](https://typescript.nuxtjs.org/) と [マイグレーションガイド](https://typescript.nuxtjs.org/migration.html) を参照ください
 - `vue-meta` が [2.0.0](https://github.com/nuxt/vue-meta/releases/tag/v2.0.0) に更新されました。対応するリリースノートを参照してください。
 - `scrollBehavior` オプションが非推奨となりました [PR#6055](https://github.com/nuxt/nuxt.js/pull/6055)
   - `app/router.scrollBehavior.js` を代わりに使用してください。
 - devModules オプションが非推奨になりました。 [PR#6203](https://github.com/nuxt/nuxt.js/pull/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 大好きクラブ会員として気になったので少し紹介します。<br>

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

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

また以降は Nuxt.js の TypeScript サポートは [Nuxt TypeScript](https://typescript.nuxtjs.org/) という nuxtjs.org 配下の公式コンテンツとして取り扱われ、TypeScript の コード補完やコードの品質、型安全 を意識したより手堅い Nuxt.js による開発手法をサポートしていくようです。<br>
現在確認できる情報として、[分割されたパッケージについての説明](https://typescript.nuxtjs.org/guide/)や、[詳しい設定方法](https://typescript.nuxtjs.org/guide/setup.html)の他、サンプルとして [Object API](https://typescript.nuxtjs.org/examples/object-api/minimal.html)、 [Class API](https://typescript.nuxtjs.org/examples/class-api/minimal.html)、 [Function API](https://typescript.nuxtjs.org/examples/function-api/minimal.html) それぞれでの実装方法が例示されています。(なんて呼んであげたらいいかわからなかったのでオブジェクト記法とかクラス記法とか個人的には呼んでたのですが、正式な呼び方ができたようで一安心。)<br>

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

##### 1. 依存パッケージの切り替え
 - `@nuxt/typescript` 非推奨となったので代替として `@nuxt/typescript-build` をインストールします。

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

##### 2. 型定義参照元の切り替え
 - `@nuxt/vue-app` と `@nuxt/config` から参照していた型定義は `@nuxt/types` から参照するように変更します。

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

##### 3. @nuxt/typescript-build を nuxt.config.js のモジュール定義に追加
```js
export default {
  buildModules: ['@nuxt/typescript-build']
}
```
##### 4. @nuxt/typescript の設定は build.typescript に移動
```js
export default {
  typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
  }
}
```

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

```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 で配置し実行できるようになります。

```bash
npm install @nuxt/typescript-runtime
```

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

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

> from: [Scrapbox](https://scrapbox.io/dojineko/Nuxt.js_2.9_がリリースされたぞ！)