I’m more on the side of learning rather than forgetting things 
Changed the build pipeline to run babel instead of uglify (i don’t want it minified on dev mode anyway).
Same result (though not minified anymore) 
.
app.js
antalvarenga
1
OvermindDL1
@antalvarenda You aren’t processing your javascript through babel(?) or so, probably forgot that step? 
EDIT: Yep, you are only running it through a minimizer but aren’t processing the ES6 to ES5 via whatever it was called.
0
antalvarenga
Thanks @peerreynders, @amnu3387.
I kinda took on @peerreynders advice and gave a try on npm scripts. I created a new phoenix project with brunch and then removed the brunch-config.js file and brunch dependencies (seems to be the most used approach to change the build tool).
Everything seems to be working, except for the js part. The built app.js file (on priv/static) on a “normal” phoenix project has a bunch of code coming from require.js, module-definitions.js, phoenix.js, phoenix_html.js, socket.js. Right now my built app.js has only the “import “phoenix_html”” statement (which is not recognized) and the socket.js code (Here is the repo of the phoenix app).
How should I deal with the javascript files, so that i can have all the default functionality that comes with phoenix?
0
peerreynders
- Brunch and Webpack are module bundlers. As such they have an opinion about the build process but by and large they are configured rather than scripted. In Webpack’s case things get a bit blurry because configurations are often assembled in a scripted manner.
- Gulp is a task runner and as such sees itself as taking the place of npm scripts. So to bundle modules it still has to use a bundler plugin such as Browserify which often can be done simply in npm itself. Gulp has more advanced facilities than npm scripts for coordinating build tasks - but from what I’ve seen it isn’t really configured as much as it is being scripted by writing Gulp tasks. One issue is that often in cases where Gulp seems simpler it really isn’t necessary (Why I Left Gulp and Grunt for npm Scripts (2016-Jan-17)).
Modern JavaScript for Dinosaurs gives an overview of using npm scripts and Webpack (see also How JavaScript bundlers work).
Aside: Here is an example where simple shell scripts are used to build a simple react application with browserify, babel-cli, watch, and uglify, cssshrink, jest-cli, babel-jest, react-addons-test-utils, eslint, eslint-plugin-react, eslint-plugin-babel, and flow-bin.
Now I don’t know whether that is the case here but I think often people try to choose a build tool before they fully understand the build process. I’m not saying that npm scripts are the be all and end all but they are likely the best way to get acquainted with the build process and as such can be pushed quite a ways. Once the build process is better understood and one’s needs are much clearer it should be easier to pick the right tool, be it webpack (SurviveJS - webpack), parcel, rollup.js or whatever.
5
antalvarenga
