LoginSignup
81
65

More than 3 years have passed since last update.

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

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/typescriptdevDependenciesとして追加するように書かれていますが、これだとGoogle App Engine(GAE)上では動きません。(詳細は後述)

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

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

tsconfig.jsonextendsを削除します。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/xxxdevDependencies

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/typescriptdependencies

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

nuxt starttranspileOnlyになったので、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
65
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
65