Nuxt.js 2.5.1 でnuxt-tsを脱するためにやった事

事の始まり

先日Nuxt.js + TypeScript での環境をやっとこさ構築したばかりなのに。ビルド中にあるメッセージが。

お？

お？

nuxt 本体で TypeScript をサポートしてくれるので nuxt-ts はもう不要になったようです。早速削除していきましょう。

やった事

yarn.lockの削除

$ rm yarn.lock

package.jsonの更新

nuxt-ts を nuxt に変更します。

dependencies 部分。

-    "nuxt-ts": "^2.4.5",
+    "@nuxt/typescript": "^2.5.0",
+    "nuxt": "^2.5.0",

script 部分。

-    "dev": "nuxt-ts",
-    "build": "nuxt-ts build",
-    "start": "nuxt-ts start",
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",

Programmatic API / Middleware の更新

ここは公式のマイグレーションガイドそのまま。なのであまり理解していないですが、必要とのことなので。SSR で express を利用しているので、そのスクリプトを下記のように修正しました。

   const nuxt = new Nuxt(config)
++ await nuxt.ready()

tslint の削除

突然の tslint command not found.
自分の勉強不足ですが、今まで使っていた tslint コマンドが利用できなくなってしまいました。なので eslint を利用することにします。公式でも eslint 推しのようです。
Why ESLint and not TSLint ?

package.json の script に以下 lint 用のコマンドを追加。

+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:fix": "yarn lint --fix",

lint 用の設定ファイル .eslintrc.js を作成します。

+module.exports = {
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+  extends: [
+    '@nuxtjs'
+  ]
+};

tsconfig.json を修正。ここを参考に実装しました。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@types/jest",
      "@nuxt/vue-app"
    ]
  }
}

＃eslint に変えるまで --fix でコードを整形してくれるという神機能を知りませんでした。便利。

yarn install

最後に $ yarn install で完了です。

参考になった資料

• 公式のマイグレーションガイド

  • https://github.com/nuxt/nuxt.js/releases/tag/v2.5.0

• nuxt-ts を削除するための PullRequest

  • 本体やサンプルリポジトリなどから nuxt-ts を削除するための PR です。すでにマージ済みですが、どのようにファイルを変更していけば良いかを確認できます。
  • https://github.com/nuxt/nuxt.js/pull/5079/files