This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.
My inspiration for building this was Max Ogden's Requirebin, which allows users to use a browser based editor to run custom javascript in the browser (including javascript that had require() statements that would normally need to be pre-processed using browserify).
Requirebin is a great site, but I found myself wondering if it was possible to do something like this with an interactive REPL.
After browsing the source code for requirebin, I found that the key to making it work was a project called browserify-cdn, an HTTP-based service which given a URL, will return in the response body a string of javascript representing a browserified bundle of an npm library.
That is, given a URL like
/standalone/lodash@latest
browserify-cdn will bundle up lodash and all of its dependencies in the same way that browserify would if we were doing require('lodash') in a client side project. The browserify-cdn folks are even nice enough to host a version of this at http://wzrd.in/, so if you visit http://wzrd.in/standalone/lodash@latest you can see the exact output of this project.
At some point we are going to have to define a request() function for the browser. Let's skip over the details of this for right now, and assume it looks something like
var request = require('superagent');
var require = function (moduleName) {
request("http://wzrd.in/standalone/" + moduleName + "@latest", function(error, res, body) {
if(error) {
return console.log(error);
}
eval(body);
});
};this includes the client-side request library superagent for brevity, but the gist of it is that this fetches the browserified bundle for whatever library we just requested, and evaluates it.
Unfortunately, browserify bundles are very nice and friendly, and everything is kept in a reasonable scope. Our code in the browser console doesn't really have access to anything happening inside the browserify bundle. So how can we get around this?
Well, one really easy way would be to take things from inside the browserify bundle scope and put them outside, like onto the global window scope.
[remember that disclaimer?]
So how can we do this, don't we have to have access to the inside of a browserify bundle at some point? It turns out, not necessarily, especially given the fact that anyone has the ability to publish any sort of contrived npm module that they can dream of.
It would be really great if for any module that we wanted to require() in the browser, there was another module that all it did was require our desired library and attach it to the window object.
Something like
window = window || {};
window.lodash = require('lodash');or more generally (using underscore templating syntax)
window = window || {};
window.<%= moduleName %> = require('<%= moduleName %>');but we don't always want the names to be the same (it's often the case that we want something like var _ = require('lodash')), so we can add one more variable
window = window || {};
window.<%= name %> = require('<%= moduleName %>');It seemed possible to programmatically publish modules like that, so I built a library to do it. Requirify is a simple npm module that can be used like this
var requirify = require('requireify');
requirify('_', 'lodash', function(err, moduleName) {
// module name is requirify-_-lodash
})
and it publishes these things to npm for you. I set up a little bot to handle all of these, and made sure to namespace them with requirify- in front so that they aren't polluting names that other people would want to use.
nice