jakesgordon
Wondering if anyone has found a way to use mix phx.digest play nicely on a project that uses (modern) browser-native es6 modules (e.g. no webpack/rollup bundling) - with http2 gaining traction using native modules in the browser can be beneficial, but the cache manifest capability of mix phx.digest don’t appear to handle this well.
The problem is the main javascript module app.js imports another module via import ./foo.js and that import statement will need to be replaced with import ./foo.[digest].js. I see that the phoenix digester does do some (limited) search/replace on the .js contents to modify any //# sourceMappingURL=app.js.map at the tail of the modules - was wondering if there is any way to make it also replace the import statements at the top of the module as well?
If not, I guess I’ll need to abandon using mix phx.digest and take the hit of setting up a front end build system (webpack/rollup/brunch) to perform the digest step and then I’ll have to make that system generate a phoenix compatible cache_manifest.json ? Or I guess not use Routes.static_path(...) at all and roll my own helper? Just wondering what approach others have taken.
For reference, the simplest example of this is a new phoenix project with a layout template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Phoenix Framework</title>
<script type="module" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body>
<%= @inner_content %>
</body>
</html>
A primary javascript entry point app.js
import foo from './foo.js'
console.log('app loaded')
console.log('foo is ' + value)
… along with a secondary javascript module foo.js
console.log('foo loaded')
export default 'hello world'
If you run this in production…
> mix phx.digest
> MIX_ENV=prod mix phx.server
You can see (in browser network panel) that the main app.js is loaded via its digested version app.[digest].js , but module.js is loaded by it’s regular name.
Note, I recognize there are pros/cons to native modules vs bundling, but that’s a different topic.
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
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
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"