待望のNuxt v2.6リリース! 〜 nuxt-tsからの移行編〜

本日(2019年4月5日)ようやくv2.6がリリースされました :tada: 
[Release v2\.6\.0 · nuxt/nuxt\.js](https://github.com/nuxt/nuxt.js/releases/tag/v2.6.0)

v2.5から`nuxt-ts`不要でTypeScriptサポートが不要になりましたが、その辺りを紹介します。

(2019/8/22追記)
v2.9のリリースにより、TS周りに変更があったので移行手順を以下の記事に書きました。
[Nuxt\.js 2\.9でのTypeScript対応 \- Qiita](https://qiita.com/iwata@github/items/a94c6d116a3e84911628)

# tl;dr

- 以前書いた[TypeScript版Nuxtであるnuxt\-tsに移行してJSファイルを駆逐した](https://qiita.com/iwata@github/items/5bc61ea9ca1c692d0370)からの差分
- v2.5はGAE上で動作しなかったが、v2.6では動作するようになった

# `nuxt-ts`からの移行手順

冒頭に書いた通り、v2.5から`nuxt-ts`は不要になり、`nuxt`があればよくなりました。
`nuxt-ts`を使っていた人用に移行手順を書いておきます。

```shell
$ yarn remove nuxt-ts
$ yarn add nuxt ts-node @nuxt/typescript
```

リリースノートには`@nuxt/typescript`を`devDependencies`として追加するように書かれていますが、これだとGoogle App Engine(GAE)上では動きません。(詳細は後述)

`package.json`で`nuxt-ts`コマンドを使っていたところを`nuxt`に変更します。

```diff
"scripts": {
- "dev": "nuxt-ts",
- "build": "nuxt-ts build",
- "start": "nuxt-ts start",
+ "dev": "nuxt",
+ "build": "nuxt build",
+ "start": "nuxt start",
},
```

`tsconfig.json`の`extends`を削除します。[^1]

```diff:tsconfig.json
{
-  "extends": "@nuxt/typescript",
   "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  },
}
```

[^1]: [前回](https://qiita.com/iwata@github/items/5bc61ea9ca1c692d0370#tsconfigjson)に追記したように`typeRoots`を使うのがよいと思います。

v2.5以降から`nuxt.config.ts`用の型定義が提供されるようになったのでそちらに移行します。

```diff:nuxt.config.ts
- import {Configuration} from 'webpack'
- import {Context} from '@nuxt/vue-app'
+ import NuxtConfiguration from '@nuxt/config'

- const nuxtConfig = {
+ const nuxtConfig: NuxtConfiguration = {
  build: {
-    extend (config: Configuration, { isClient }: Context) {
+    extend (config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
}

module.exports = nuxtConfig
```

随分とシンプルになりました :smile: 
`@types/webpack`も不要になったので消しておきましょう。

```sh
$ yarn remove @types/webpack
```

## `@types/xxx`を`devDependencies`へ

`nuxt start`時の挙動がv2.5から変更になりました。
以下のソースから分かるようにトランスパイルだけを行うようになっています。
https://github.com/nuxt/nuxt.js/blob/dev/packages/cli/src/command.js#L96-L99

v2.4では[前の記事](https://qiita.com/iwata@github/items/5bc61ea9ca1c692d0370#typesxxx%E3%81%AFdevdependencies%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8Fdepencencies%E3%81%AB%E5%AE%A3%E8%A8%80%E3%81%99%E3%82%8B)で書いたように、`nuxt star`時に型チェックもしていたため、`@types/xxx`の型定義ファイルをpackage.jsonの`dependencies`に宣言しておく必要がありましたが、これで`devDependencies`に宣言すればよくなりました。

# GAE Node Standard Enviromentで動かす

## v2.5では起動しない

v2.5で`nuxt-ts`が廃止され、`nuxt`一本になったのですがGAEで動きませんでした。
これはv2.5では`nuxt`コマンドを使うと常に`tsconfig.json`への書き込みが発生していたためです。
PaaSではよくある制限ですが、GAEでは特定パス以外[^2]へのファイル書き込みは許可されていません。
なので、`tsconfig.json`に書きこむときにエラーとなり起動できない状態でした。

v2.6から`tsconfig.json`が存在しなかったときだけ書き込まれるようになったので、`tsconfig.json`を事前に用意しておけば起動できるようになりました :innocent: 

[^2]: `/tmp`以下のみ許可

## `@nuxt/typescript`は`dependencies`へ

GAE上で動かすためには、`yarn install && yarn build`した状態で`gcloud app deploy`する必要があります。
`gcloud app deploy`は`NODE_ENV=production`環境で`yarn install`が実行されます。
このとき`@nuxt/typescript`を`devDependencies`に宣言しておくと、`@nuxt/typescript`がないといわれ、起動に失敗します。
なので`@nuxt/typescript`は`dependencies`に書かれている必要があります。

~~`nuxt start`が`transpileOnly`になったので、GAEの`instance_class`を最弱のF1にしても起動するかな?と思ったのですが、無理でした[^3]。
なのでF2以上を使うことをお勧めします。~~
(追記 2019/7/17)
`instance_class`がスペックアップされたのでF1で動作するようになりました :tada: 
[App Engine second generation runtimes now get double the memory; plus Go 1\.12 and PHP 7\.3 now generally available \| Google Cloud Blog](https://cloud.google.com/blog/products/application-development/app-engine-second-generation-runtimes-now-get-double-the-memory-plus-go-112-and-php-73-now-generally-available)

[^3]: 502が返ってきてログにはv8のエラーが出力される