Nuxt.jsで開発時だけconsole.log()するplugin

#やりたいこと

タイトルの通り。経緯としては

• なんだかんだ言いつつconsole.log()は便利なので使ってしまう。
• でもコード内に直書きしてしまうと後で消すのが面倒。
• ESLintの警告が出るのでconsole.logそのものは少なくしておきたい。

といった感じ。なので開発時だけconsole.logして、それ以外のときは一切何も出ないようにしたい。
ついでにinjectionしていちいちimport文を書かなくてもいいようにする。

環境

• Node.js v14.16.0
• nuxt: "^2.14.12"
• @nuxt/typescript-runtime": "^2.0.1",

手順

1. dev環境かどうかを判別できるようにする
2. dev環境のみconsole.logする関数を作る。
3. 作った関数をpluginsでinjectionする。

実際のコード

dev環境かどうかを判別できるようにする

nuxt.config.jsにはdevプロパティがある。
API: dev プロパティ - Nuxt.js

nuxt コマンドを使うときは dev は強制的に true になります
nuxt build、nuxt start、nuxt generate コマンドを使うときは dev は強制的に false になります

本来の用途は違うのだが、今回はこのプロパティを使って判別を行うことにした。
もっといい方法があったら教えてほしい。

nuxt.config.js

export default {
  dev: process.env.NODE_ENV !== 'production', // これを追加する
  telemetry: false, // ちなみにこのオプションをつけると開始時の質問が消える。
  // 省略
  }

dev環境のみconsole.logする関数を作る。

devプロパティは@/nuxt.configをimportすることで読み込める。

plugins/debugLog.ts

/* eslint-disable no-unused-vars */
import { Plugin } from '@nuxt/types'

import nuxtConfig from '@/nuxt.config'

const isDev: boolean = !!nuxtConfig?.dev

if (isDev) {
  // eslint-disable-next-line no-console
  console.log('this app is runnning on Dev mode.')
}

export function debugLog(...args: any[]): void {
  if (!isDev) return
  // eslint-disable-next-line no-console
  console.log('[デバッグ]:\n', ...args)
}

isDevフラグがtrueのときのみconsole.logが実行される。

作った関数をpluginsでinjectionする。

あとはこの関数をinjectionするためのコードを書いて

plugins/debugLog.ts

declare module 'vue/types/vue' {
  interface Vue {
    $debug(...args: any[]): void
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $debug(...args: any[]): void
  }
}

declare module 'vuex/types/index' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Store<S> {
    $debug(...args: any[]): void
  }
}

const myPlugin: Plugin = (_context, inject) => {
  inject('debug', (...args: any[]): void => debugLog(...args))
}

export default myPlugin

nuxt.config.jsでpluginとして登録する。

nuxt.config.js

export default {
  plugins: [
    // 他のpluginもあれば書く
    { src: '@/plugins/debugLog.ts', mode: 'client' },
  ],
  // 省略
  }

使い方

実際に使用する際はthis.$debug("hoge")でよびだせる。

sample.vue

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data(): LocalData {
    return {
      // 省略
    }
  },
  methods: {
    async doPoripori() {
      await doSomothing().catch((error)=>{
        this.$debug(error) // こんな感じ
      })
    },
  },
})
</script>

injectionしているので当然middlewareでも呼び出せる。

middleware.ts

import { Middleware } from '@nuxt/types'

const ebi: Middleware = (context): any => {
  context.app.$debug('こうやって使う')

}

export default ebi

参考資料

• dev プロパティ - NuxtJS
• プラグイン - Nuxt TypeScript