開発中は console.log
で色々確認したいけど、ESLint で console.log
が残ってるとエラーになるようにしてると、特に雑でいい個人開発だと都度消してってのがメンドイので production の時だけ console.log を削除してしまいたかった。
webpack の uglifyjs-webpack-plugin で実現できていたみたいだけど、リポジトリが archived になっていたので、コレは使わず今回は babel の babel-preset-minify を使って console.log
を削除するようにしてみた。
環境
- webpack
^5.6.0
- @babel/core
^7.12.10
- babel-loader
^8.2.2
- babel-preset-minify
^0.5.1
npm scripts
"scripts": { "start:dev": "webpack serve --mode development", "start:prod": "webpack serve --mode production", "build": "webpack --mode production" }
npm script でそれぞれの場合にあった mode をオプションで指定して実行するようにした。
babel-preset-minify で console.log を削除する
webpack.config.js
module.exports = { // … module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }, }
babel.config.json
{ "presets": [ "@babel/env", [ "minify", { "removeConsole": { "exclude": [ "error", "info" ] } } ] ] }
これで console.log
が削除されるようになりました。
JavaScript の minify は --mode=production
の時のみ実行されるみたいなのですが、console.log
の削除は mode に関係なく production でも development でも削除されてしまいました。
これでは 開発中 (--mode=development
) のとき困るので、production の時のみ removeConsole
のオプションを付けるように修正する必要があります。
production mode の時だけ removeConsole
オプションを付けて console.log
を削除する
babel 設定は JavaScript なら Config Function API を使って色々と設定を取り出して設定を変更することができるようです。
module.exports = function(api) { return {}; };cf. [https://babeljs.io/docs/en/config-files#config-function-api:title]
Config Function API の api.env()
を使うと NODE_ENV
の値を利用することができます。babel.config.json
を babel.config.js
にリネームして NODE_ENV
が production
の時のみ removeConsole を使うように変更します。
babel.config.js
module.exports = (api) => { const prodMode = api.env('production'); return { "presets": [ "@babel/env", [ "minify", prodMode && { "removeConsole": { "exclude": ["error", "info"] } } ].filter(Boolean) ] } };
これで --mode=production
の時だけ console.log
が…となるつもりでしたが babel.config.js
に渡ってくる api.env
が常に development
になっていて意図したとおりに動作しません。
これは npm script で設定してある webpack serve --mode production
の モードは process.env.NODE_ENV
に設定される訳ではないので、babel の設定内で取れる api.env()
はデフォルトの development
になってしまっていたという事でした。
npm script に NODE_ENV=
のオプションを付けても良いのですが、--mode
と二重になってしまってあまりイケてない気がしたので babel-loader を通じて babel を呼び出す webpack の設定で --mode
から NODE_ENV
を設定するようにします。
webpack.config.js で --mode
オプションを使う
webpack の設定内でコマンドから渡されるオプションを取得するには (env, argv) => { return {/* webpack.config */} }
の形にすることで argv
引数を使って値を取得することができます。
webpack.config.js
module.exports = (env, argv) => { const prodMode = argv.mode === 'production'; // --mode=production の時、NODE_ENV を設定する if (prodMode) { process.env.NODE_ENV = 'production'; } return { // … module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }, }; }
webpack で NODE_ENV
が設定されてから babel が呼び出されるので、これで --mode=production
の時のみ babel の babel-preset-minify のオプションが切り替わり console.log
を削除できるようになりました!
₍ ᐢ. ̫ .ᐢ ₎ ヤッヤネ!
所感
昔やった気がする…って思ったらやっぱり書いてた。
この時は uglifyjs-webpack-plugin と同じような動きをする terser-webpack-plugin を使う方法を書いてた。
今見ると config 見づらいし、今回は webpack の --mode
オプションを使って babel の設定を分岐させられるようにする学びが合ったのでヨシ!
2021年最初だし去年読んでよかった本とか買って良かったものとか書こうかと思ったけど、本全然読めてなかったし特に買ったものもなかった… 去年何してたんだろう… 虚無か?
それでは今年も Eigðu góðann dag〜 ; )
[参考]
- GitHub - webpack-contrib/uglifyjs-webpack-plugin: [deprecated] UglifyJS Plugin
- babel-preset-minify · Babel
- GitHub - webpack-contrib/terser-webpack-plugin: Terser Plugin
- UglifyjsWebpackPluginが非推奨になったので乗り換えた - Satoryu’s Website
- Babel 7 を試す - アカベコマイリ
アイカツ! あかりGeneration Blu-ray BOX1
- 発売日: 2015/04/02
- メディア: Blu-ray