In my app.js generated by the default mix phx.new --live
I have:
import "phoenix_html"
import {Socket} from "phoenix"
import topbar from "topbar"
import {LiveSocket} from "phoenix_live_view"
And in the phoenix js package, there is:
"main": "./priv/static/phoenix.js",
However, I don’t want to import this minified version, I want to use the non-minified:
"assets/js/phoenix.js"
for better visibility into what is going on under the hood. How do I do that? I know I can fork the packages to change the package.json
, but seems like too much for such a simple thing?
Doesn’t Webpack generate maps to be able to provide non-minified view in the DevTools?
I am not using webpack, which I hate with a passion. Judging by the many webpack related questions recently, I think I am not alone.
Any way, I solved my problem by brute force: I copied the few js files I need out of the deps dir and just import them directly. I also have to npm install morphdom
; I hope the live view team is not forking morphdom to be incompatible with the upstream Everything seems to work fine for now.
1 Like
If no one have a better idea, this is the solution.
- npm install --save-dev morphdom
- make hard links from the 3 js files (phoenix.js, phoenix_html.js, phoenix_live_view.js) to the assets/js dir
- import them instead of the packages, ie:
-import "phoenix_html"
-import {Socket} from "phoenix"
+import "./phoenix_html.js"
+import {Socket} from "./phoenix.js"
import topbar from "topbar"
-import {LiveSocket} from "phoenix_live_view"
+import {LiveSocket} from "./phoenix_live_view.js"
I think this is cleaner:
- the 3rd party npm module
morphdom
is installed the right way
- the minified version of the js files are built artifacts, not source. Right now they are checked in, and it feels wrong
- everything is just built once and minified once now
The downside is the resulting bundle is somewhat bigger. But what do I care. Liveview already cuts down javascript a lot.