And so I can do and use what ever I want to do, Is that possible in Phoenix? without using brunch. I have tried brunch but its giving me strange behaviour as Creating modules and other stuff , Why I cant be simple as it is.
Create a js file, reference it in main js file and then use it anywhere where i want to.
That should work the same if you manually load the file; if I’ve got this right: you have a function or method in a JS file. It’s global. In an arbitrary HTML file you’re waiting for the document to load so that you can guarantee the function is available. You’re running the function.
Rails does what it does via the Sprockets library; it is importing the JS you referenced in application.js via magic. What you’ve done by saying --no_brunch is remove the equivalent to Sprockets from Phoenix. It can’t load your file automatically because you’ve removed the thing that would allow it; by default, with brunch, you get a main JS file that you can import other JS files into (and it has to be specified explicitly; it doesn’t do magic like Rails). Without brunch, you need to manually import every JS file into the head or foot of your HTML
Okay I get it but while using brunch how is that possible do normal JS and Coffee stuff, I dont want to go with Modules way and then exporting it and etc,
I just want to do JS and Coffee Script in my project as I want to add Datatables.
Is there any good tutorial for that? Where I can see how to setup normal JS files and Also how could I use Jquery in my project
Compile the CS to Is manually? You’ll need to put a script reference to every JS file in the HTML, just as you would if you were hand writing an HTML page
How to add JQuery and Other JS files to A phoenix project. Am struggling with this for almost 3 days now and I am totally giving up now on Phoenix as this is very minimal thing which i want to achieve
No, I’m definitely getting you. Put the files in priv/js. In the main layout file, reference the scripts in script tags. You don’t want to use any kind of task runner, so you need to manually specify the scripts. Phoenix is generating HTML, you just reference JS files as you would do in any HTML project.
That would be awesome, Are you open source? I will look your code to get inspiration PLUS It would be a so so great to have a test project with JQuery and sample js files using brunch
This gist shows you a very basic configuration you have to make to set up the coffee compiler and jquery globals.
Just on my opinion, since brunch is already ready to compile newer versions of javascript you don’t really gain too much with coffee.
Well, just trying to do an example Phoenix project with explanations, and looks like export doesn’t play nicely with coffee-script-brunch inthis context - not sure if I’m doing something wrong though. ex:
# example.coffee
example = ->
console.log('blah blah')
export example
// app.js
import { example } from "./example.coffee";
example()
This thows the “SyntaxError: export declarations may only appear at top level of a module” error that indicates Babel isn’t transpiling the modules [properly]. Works fine when not CS, but in CS it fails which seems like an issue with order of operations; transpiling step done by Babel doesn’t seem to be happening with the CS files.
This works:
# example.coffee
example = ->
console.log('blah blah')
module.exports =
example: example
I thought it was because the CS version in the plugin was out of date, but it isn’t really, it’s on 0.11.x., which supports ES-style module imports/exports
@ijunaidfarooq here is the example project. Writeup is quite long, if anything isn’t clear either put an issue in or ask here, I’ll get it updated. Examples may be a bit silly. Anyway:
Every stage (Scss, CS, globals) has it’s own branch; the main branch (`diy_brunch) just has the description on a default Phoenix install so kinda expects that you pull it down and go through it. There are no major things, just a small number of very small changes.
As @cassiogodinho mentions, doesn’t make an awful lot of sense to use CS over ES6, and you get ES6 out of the box with Phoenix, no setup or config. I’d strongly advise using that, even if it is a little bit less terse; CS doesn’t really have anything bar (arguable) syntax niceties over ES6, and with ES6 you get a whole lot more. Plus a lot more people will be able to understand the code if it’s ES6, so it’s a lot easier to get help. But ¯_(ツ)_/¯