本日(2019年4月5日)ようやくv2.6がリリースされました ![]()
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
- 以前書いたTypeScript版Nuxtであるnuxt-tsに移行してJSファイルを駆逐したからの差分
- v2.5はGAE上で動作しなかったが、v2.6では動作するようになった
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
{
- "extends": "@nuxt/typescript",
"compilerOptions": {
"baseUrl": ".",
"types": [
"@types/node",
"@nuxt/vue-app"
]
},
}
v2.5以降から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
随分とシンプルになりました ![]()
@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を事前に用意しておけば起動できるようになりました ![]()
@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で動作するようになりました ![]()
App Engine second generation runtimes now get double the memory; plus Go 1.12 and PHP 7.3 now generally available | Google Cloud Blog