Esbuild and removing console.log in prod

Questions / Help
1

Hi all,

Has anyone done something like this in their config.exs or prod.exs?

export default defineConfig({
    esbuild: {
      drop: ['console', 'debugger'],
    },

Screenshot 2023-11-09 at 22-45-08 Need option to remove console. · Issue #28 · evanw_esbuild
Screenshot 2023-11-09 at 22-45-08 Need option to remove console. · Issue #28 · evanw_esbuild853×450 40.3 KB

Thanks.

2 Likes
2

Did you find a solution?

3

Actually, the issue was the esbuild version. I was using 0.12.8 and had to update. I am now at 0.18.6 and the drop works. GitHub - phoenixframework/esbuild: An installer for esbuild

config :esbuild, version: “0.18.6”
mix esbuild.install

Then you can specify drop

–drop:console

1 Like
4

Cool! No, I hadn’t sorted this yet. Thanks for posting the solution! Will test.

5

Like:


      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --drop:console),
6

Full version:

# Configure esbuild (the version is required)
config :esbuild,
  version: "0.18.6",
  default: [
    args: ~w(
      js/app.js
      --bundle
      --target=es2017
      --outdir=../priv/static/assets 
      --external:/fonts/*
      --external:/images/*
      --drop:console
    ),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]
7

You should apply these changes to your mix.exs so that it only runs during the deployment. This way you continue to see your javascript un-minified and with full logs during development. The only change to your esbuild should be the version.

   defp aliases do
       [ 
        ...
         "assets.deploy": [
           "esbuild default --minify --drop:console --drop:debugger",
           "phx.digest"
         ]
       ]
2 Likes
8

Here is a little Task where this is used. Automate the Registration of Javascript Stimulus Controllers in a Phoenix app