EddTally

EddTally

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

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?

Marked As Solved

EddTally

EddTally

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?

Last Post!

sevensidedmarble

sevensidedmarble

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.

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement