Webpack production mode の時だけ babel-preset-minify で console.log を消したい

開発中は 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〜 ; )

[参考]