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
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
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









