#やりたいこと
タイトルの通り。経緯としては
- なんだかんだ言いつつconsole.log()は便利なので使ってしまう。
- でもコード内に直書きしてしまうと後で消すのが面倒。
- ESLintの警告が出るのでconsole.logそのものは少なくしておきたい。
といった感じ。なので開発時だけconsole.logして、それ以外のときは一切何も出ないようにしたい。
ついでにinjectionしていちいちimport文を書かなくてもいいようにする。
環境
- Node.js v14.16.0
- nuxt: "^2.14.12"
- @nuxt/typescript-runtime": "^2.0.1",
手順
- dev環境かどうかを判別できるようにする
- dev環境のみconsole.logする関数を作る。
- 作った関数を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