プロダクションビルド時に console.log を消す babel プラグインを Vue.js と Nuxt.js に導入する

// 🙎‍♂️ Yuji Tsuburaya📆 January 28, 2020🔖 Vue.jsNuxtJSJavaScriptbabel

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

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

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

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

Vue.js に導入する

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

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

Nuxt.js に導入する

Nuxt.js の場合には nuxt.config.js に以下を追記します。

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

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

広告