トップ/記事一覧

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

📆2020/01/28(最終更新日:2020/08/20)🔖 Vue.jsNuxtJSJavaScriptbabel

この記事は最終更新日から1年以上が経過しています。内容が古い箇所がある可能性があるためご注意ください。

デバッグ時に 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" } } } }