プロダクションビルド時に console.log を消す（Vue.js / Nuxt.js)

デバッグ時に console.log はよく使われると思うのですが、 プロダクションビルド時に余分なデータがコンソールに吐き出されるとかっこ悪いですよね。 表題の通りですが、console.log を消す babel プラグインを Vue.js と Nuxt.js それぞれに導入し、 プロダクションビルド時のみに console.log が消すことができたので、その方法をご紹介したいと思います。

Vue.js に導入する

プラグインのインストール

babel-plugin-transform-remove-console を以下のコマンドでインストールします。(yarn の場合は適宜読み替えてください。)

JavaScript
npm install babel-plugin-transform-remove-console --save-dev

Vue.jsの場合には .babelrc に以下を追記します。

JavaScript
"env": {
  "test": {
    "presets": ["env", "stage-2"]
  },
  "production": {
    "plugins": ["transform-remove-console"]
  }
}

Nuxt.js に導入する

Nuxt.js には terser という minifier がデフォルトで入っています。この terser の機能で console.log を消すことができます Nuxt.js の場合には nuxt.config.js に以下を追記するだけで OK です。

JavaScript
/*
 ** Build configuration
 */
build: {
  /*
   ** You can extend webpack config here
   */
  terser: {
    terserOptions: {
      compress: {
        drop_console: process.env.NODE_ENV === "production"
      }
    }
  }
}