81
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

81
Last updated at Posted at 2019-04-05

本日(2019年4月5日)ようやくv2.6がリリースされました :tada:
Release v2.6.0 · nuxt/nuxt.js

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

(2019/8/22追記)
v2.9のリリースにより、TS周りに変更があったので移行手順を以下の記事に書きました。
Nuxt.js 2.9でのTypeScript対応 - Qiita

tl;dr

nuxt-tsからの移行手順

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

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

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

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

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

tsconfig.jsonのextendsを削除します。1

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

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

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も不要になったので消しておきましょう。

$ 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では前の記事で書いたように、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:

@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

  1. 前回に追記したようにtypeRootsを使うのがよいと思います。 ↩

  2. /tmp以下のみ許可 ↩

  3. 502が返ってきてログにはv8のエラーが出力される ↩

81
63
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
81
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?