Reference GitHub file in jsFiddle

Question

Is there a possibility to misuse grab files from a github repo as external resources in jsFiddle?

Answer 1

UPDATE

How to use or misuse github as kind of a CDN is not a thought that only benign "fiddlers" have; criminals have that thought also. Unfortunately, github, being as free and as anonymous as it is, is prone to be misused. As far as I can tell, the fact that some of the above solutions are things which are now broken, has to do with that.

Here is how I do it. It works now (Nov 2019), but it's admittedly not very convenient.

Get a github account yourself, if you don't already have one. Create a repository the name of which is identical to your github user name. That repo (and only that repo), - I'll call it the "home repo" - you can use as your web hosting service. https : // yourGithubUserName .github.io will show your home repo "raw/as it is" to the public. (Folder contents is not shown, and you HAVE TO have an index.html)

Now, if you want to use someone else's github repo in a fiddle, just copy over the complete repo to your home repo, and then just reference your copy of that repo with the src attribute of a script tag in the HTML part of the fiddle. Like this:

Above snippet shows the HTML part of a working fiddle which is using the node modules esprima, estraverse, and escope, which is to say, the github repos of the same name. thirdparty is there because that's the name of the subfolder (in my home repo) where I put the copies.

As I said, not very convenient (lot's of copy and paste to set it all up), but that's what works for me.

And I should mention, just copy/paste might not be enough, you might have to do browserify or webpack on the referenced repo (if it was made for node, that is.)

here is the fiddle I was talking about.

OLD ANSWER (works, but is kind of slow)

You can use requirify. It's made to enable you to require (as it is in node) on the browser command line; but it works in fiddles too, I tested it. I have no clue if it's "the best", compared to the other methods above (since I didn't go through them all and tested them), but it works.

Here is an example fiddle loading esprima (javascript parser), then escodegen (reverse javascript parser depending on esprima), then parsing and regenerating some simple javascript code.

what

require('lorem', 'ipsum')

does is, it loads the ipsum node module from npm, and puts the result into global variable named lorem. So this is only for npm modules not general github files which aren't also node modules. Shouldn't be much restriction since you can always turn it into a node module if it's your own project.

here it is

second example using same technique.

(((it's actually even simpler as shown in the fiddle. You can just put the 2 require statements right one after the other, you don't need a callback function in between (just one callback function to wait until both are loaded))))