How to bundle multiple files into different directories using the EsBuild config

Questions / Help
, ,
1

I have two seperate js & css files relating to two external HTML projects and I want them to be bundled into two different folders within priv/static/assets.
My current setup for one of my projects is:

config :esbuild,
  version: "0.12.18",
  default: [
    args:
      ~w(
		js/bundle-one.js js/bundle-one.css
		--bundle --target=es2017
		--outdir=../priv/static/assets/bundle_one
		--external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

How do I add a bundle-two.js and bundle-two.css to bundle into a /priv/static/assets/bundle_two folder?

1 Like
2

FYI: I’m sure someone can tell you how to do whatever you want with the elixir wrapper for esbuild, but I really think if you need anything beyond the bare minimum, you should just use esbuild directly. It’s not difficult to do, I can provide some help if you’re interested in that.

3

I am not sure, because I haven’t tried, but can’t you just make a second next to :default and add a second watcher for this and a second esbuild in mix.exs, etc…

4

With this solution will I be able to watch for any changes to the .js and .css bundles whilst I am in dev mode running iex -S mix phx.server and have the files automatically updated in priv/static/assets?

5

Not sure what else you think would be more direct, given the elixir package is not really a wrapper, but just a different way of downloading the binary.

6

I got it working with the help of this comment and the esbuild ‘wrapper’ documentation here

What I did:

mix.exs file

  defp aliases do
    [
      ...
      "assets.deploy": ["esbuild bundle_one bundle_two --minify", "phx.digest"]
    ]
  end

dev.exs

  watchers: [
		# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild_bundle_one: {Esbuild, :install_and_run, [:bundle_one, ~w(--sourcemap=inline --watch)]},
    esbuild_bundle_two: {Esbuild, :install_and_run, [:bundle_two, ~w(--sourcemap=inline --watch)]}
  ]

config.exs

config :esbuild,
  version: "0.12.18",
  bundle_one: [
    args:
      ~w(
		js/bundle-one.js js/bundle-one.css
		--bundle --target=es2017
		--outdir=../priv/static/assets/bundle_one
		--external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ],
	bundle_two: [
    args:
      ~w(
		js/bundle-two.js js/bundle-two.css
		--bundle --target=es2017
		--outdir=../priv/static/assets/bundle_two
		--external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Files names replaced for obvious reasons.
And it seems to be working.
Can anyone improve on this?

1 Like
7

Because you can interact with the NPM ecosystem directly, write your own JS script that runs ESBuild instead of relying upon it’s CLI interface, etc. I think they even say themselves that the CLI interface is meant for quick use.