Vue.js で console.log を使うとビルド時にコケるので対処する

Vue CLI 3 で作成したアプリケーション中に console.log() や console.error() などを書いた状態で npm run build (= vue-cli-service build) をすると、エラーが発生してしまい正しくビルドできなかった。

$ npm run build

> frontend@0.0.0 build /Users/Neo/practice-flask-vue/frontend
> vue-cli-service build

⠙  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
⠼  Building for production...

 ERROR  Failed to compile with 1 errors    16:07:09

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at src/App.vue:73:7:
  71 |     }
  72 |     catch(error) {
> 73 |       console.error(error);
     |       ^
  74 |       this.errorMessage = `${error}`;
  75 |     }
  76 |   }

error: Unexpected console statement (no-console) at src/App.vue:91:7:
  89 |     }
  90 |     catch(error) {
> 91 |       console.error(error);
     |       ^
  92 |       this.errorMessage = `${error}`;
  93 |     }
  94 |   }

2 errors found.

 @ ./src/main.ts 6:0-28 10:13-16
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Neo/.npm/_logs/2019-12-05T07_07_09_295Z-debug.log

プロダクション・ビルドしようとすると、no-console エラーに引っかかる、ということのようだ。

大したアプリではないので console を使っているのだが、ビルドできないのは困る。しかし手作業でコードを修正するのも面倒臭い。

そこで調べてみたところ、Babel のプラグインを入れれば解消できることが分かった。

まずは以下をインストールする。このプラグインはトランスパイル時に console のコードを削除してくれるモノ。

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

続いて、babel.config.js を開く。Vue CLI で生成した直後だと以下のようになっていると思う。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
};

コレを次のように編集する。

const plugins = [];

// npm run build でビルドする際 console の使用箇所があるとエラーになるので除去する
if(process.env.NODE_ENV === 'production') {
  plugin.push('transform-remove-console');
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: plugins
};

本番ビルドが行われる時は NODE_ENV 環境変数に production という文字列が設定されているので、コレを利用して、プロダクション・ビルドの時だけ console の記述を削除するようにした、というワケ。

コレで一件落着。無事 npm run build も通るようになって良き良き。