2.9.0 から TypeScript の対応が変わったのでバージョンバップ時の手順を残しておきます。
こちらのリポジトリをバージョンアップしました。
https://github.com/TAC/nuxt-typescript-example/tree/Nuxt_2.4.0
バージョンアップ後はこちらになります。
https://github.com/TAC/nuxt-typescript-example
モジュールのアップグレード
まずは npm-check-updates を使って一括でアップグレードしてしまいます。
> ncu -u
Upgrading C:\work\repos\nuxt\typescript\app\package.json
[====================] 24/24 100%
nuxt ^2.4.0 → ^2.9.2
nuxt-property-decorator ^2.1.3 → ^2.4.0
ts-node ^8.1.0 → ^8.3.0
@nuxt/typescript ^2.7.1 → ^2.8.1
@nuxtjs/eslint-config ^0.0.1 → ^1.1.2
@typescript-eslint/eslint-plugin ^1.9.0 → ^2.0.0
babel-eslint ^10.0.1 → ^10.0.3
eslint ^5.15.1 → ^6.3.0
eslint-config-prettier ^4.1.0 → ^6.1.0
eslint-config-standard >=12.0.0 → >=14.1.0
eslint-loader ^2.1.2 → ^3.0.0
eslint-plugin-import >=2.16.0 → >=2.18.2
eslint-plugin-jest >=22.3.0 → >=22.16.0
eslint-plugin-node >=8.0.1 → >=9.2.0
eslint-plugin-nuxt >=0.4.2 → >=0.4.3
eslint-plugin-prettier ^3.0.1 → ^3.1.0
eslint-plugin-promise >=4.0.1 → >=4.2.1
eslint-plugin-standard >=4.0.0 → >=4.0.1
eslint-plugin-vue ^5.2.2 → ^5.2.3
nodemon ^1.18.9 → ^1.19.1
prettier ^1.16.4 → ^1.18.2
rimraf ^2.6.3 → ^3.0.0
Run npm install to install new versions.
package.json が更新されるので yarn でモジュールを更新します。
そして、不要になったモジュールをアンインストールします。
yarn remove ts-node @nuxt/typescript @nuxtjs/eslint-config @typescript-eslint/eslint-plugin
次に新しく必要となったモジュールを追加します。
yarn add @nuxt/typescript-runtime
yarn add -D @nuxt/typescript-build @nuxtjs/eslint-config-typescript
tsconfig.json を修正します。
app/tsconfig.json
{
"compilerOptions": {
"types": [
"@types/node",
- "@nuxt/vue-app"
+ "@nuxt/types"
]
nuxt.config.ts を修正します。
app/nuxt.config.ts
-import NuxtConfiguration from '@nuxt/config'
+import { Configuration } from '@nuxt/types'
-const nuxtConfig: NuxtConfiguration = {
+const nuxtConfig: Configuration = {
+ buildModules: ['@nuxt/typescript-build'],
package.json を修正して、nuxt コマンドを nuxt-ts コマンドに変更します。
app/package.json
"scripts": {
- "dev": "nuxt",
- "build": "nuxt build && yarn build:copy",
+ "dev": "nuxt-ts",
+ "build": "nuxt-ts build && yarn build:copy",
.eslintrc.js を修正して ESLint の設定も変更します。
app/.eslintrc.js
extends: [
- '@nuxtjs',
+ '@nuxtjs/eslint-config-typescript',
これだけだと以下の警告メッセージが出ます。
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.6.0
YOUR TYPESCRIPT VERSION: 3.6.2
Please only submit bug reports when using the officially supported version.
=============
これは TypeScript のバージョンが新しすぎた場合の警告で、.eslintrc.js の parserOptions で表示を抑制できるみたいですが、根本的な解決は依存しているモジュールのバージョンが新しくなることのようなので対応を待つしかないようです。
app/.eslintrc.js
module.exports = {
parserOptions: {
+ 'warnOnUnsupportedTypeScriptVersion': false
},
functions のモジュールもアップグレード
app と同様の手順でアップグレードします。
> ncu -u Upgrading C:\work\repos\nuxt\typescript\functions\package.json
[====================] 14/14 100%
@nuxt/config ^2.7.1 → ^2.9.2
cross-env ^5.2.0 → ^5.2.1
express ^4.17.0 → ^4.17.1
firebase ^6.0.2 → ^6.5.0
firebase-admin ~7.0.0 → ~8.4.0
firebase-functions ^2.3.0 → ^3.2.0
nuxt ^2.4.0 → ^2.9.2
nuxt-property-decorator ^2.1.3 → ^2.4.0
ts-node ^8.1.0 → ^8.3.0
@nuxt/typescript ^2.7.1 → ^2.8.1
@types/express ^4.16.1 → ^4.17.1
tslint ^5.12.0 → ^5.19.0
typescript ^3.2.2 → ^3.6.2
Run npm install to install new versions.
次に Configuration インターフェースの取得先が @nuxt/config から @nuxt/types に変わったので、モジュールを入れ替えます。
> yarn remove @nuxt/config
> yarn add -D @nuxt/types
Nuxtの設定している箇所を修正します。
functions/src/index.ts
-import NuxtConfiguration from '@nuxt/config'
+import { Configuration } from '@nuxt/types'
-const nuxtConfig: NuxtConfiguration = {
+const nuxtConfig: Configuration = {
あとは以前と同じ手順でビルドして、firebase serve で動作確認できます。
以上の設定で 2.4.0 から 2.9.2 にバージョンアップすることができました！
参考サイト
Migration from Nuxt 2.8
Nuxt.js 2.9でのTypeScript対応
typescript環境でALEのeslint利用fixerが動かなくなっていたことの対処方法
Written with StackEdit.
0 件のコメント:
コメントを投稿