Qqwy
How to configure brunch to have multiple compiled JS files?
I am building a simple Phoenix application that harnesses Phoenix’ channels, and I want to create two compiled JavaScript files:
- The normal ‘app.js’ that contains all code in
/assets/js/exceptsnippet.js. - A lite ‘snippet.js’ that will only be used on a couple of pages, which is a compiled (because I use ES6 stuff) version of
/assets/js/snippet.js(and it imports some other dependencies using ES6importstatements).
I have been strugglig with the brunch configuration but I was unable to figure this out:
- I attempted to alter the
files: javascripts: joinToandfiles: templates: joinTosections to exclude the file on the normal case, and only include the file forsnippet.js(What is ‘templates’ for exactly, anyway?) - I attempted to add
js/snippettomodules: autoRequirebut this did not help (and I don’t understand what it does exactly).
I did look in the Brunch documentation, but this did not help very much (and it is a lot less detailed than Elixir’s documentation
)
Maybe someone who has done something similar in the past knows what to do?
Most Liked
yurko
here’s an example snippet from brunch config for two files which use different dependencies:
joinTo: {
"js/app.js": /(^src\/|^node_modules\/(?!(bootstrap|trumbowyg)))/,
"js/admin.js": /(^admin\/|^node_modules\/process\/|^node_modules\/trumbowyg\/|^node_modules\/bootstrap\/|^node_modules\/phoenix_html\/)/,
}
...
modules: {
autoRequire: {
"js/app.js": ["src/index"],
"js/admin.js": ["admin/index"],
}
},
edit: the src/index and admin/index map to source files assets/src/index.js and assets/admin/index.js which import needed modules
Qqwy
It turns out that there is an alternative to joinTo which is called entryPoints, which will follow all requires (and imports and other ways of including files), which is exactly what I was looking for.
Thank you very much! ![]()
yurko
These dependencies are needed as far as I remember for the separation between the compiled files. Try it without them and see if you have a need for more separation.
It’s been some time since I set these things up so I can’t give you exact explanation of what’s what and for what purpose ![]()
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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









