nice

great ideas! but why not simple use the "bundle" version from http://wzrd.in/ ?

For example: <script src="http://wzrd.in/bundle/backbone@latest"></script>

And then, simply: Backbone = require('Backbone') ?

awesome!

Ok, I give up, I couldn't manage to successfully turn this into a bookmarklet. Can anyone help me?

awesome!

@fiatjaf

javascript:(function(){var body=document.getElementsByTagName('body')[0];var script=document.createElement('script');script.type='text/javascript';script.src='https://s3.amazonaws.com/s3.mathisonian.com/javascripts/requirify-browser.js';body.appendChild(script);})();"

is a bookmarklet containing the following code:

   var body= document.getElementsByTagName('body')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'https://s3.amazonaws.com/s3.mathisonian.com/javascripts/requirify-browser.js';
   body.appendChild(script);

bingo! 💯

@mulderp

I think you could do that but, but if you are using a custom require method to go and fetch the code from wzrd.in, the bundled version will have its own require method that will overwrite your custom one.

@mathisonian

I think more useful then a bookmarklet could be to publish this as chrome extension with ability to turn on/off.

Super great!

Cooooooooooooooo~

nice!!! thanks

Great!

👍

awesome！！！

This is excellent .. as chrome extension, highly convenient.

cool~..:smile:

i can't use it in the chrome dev tool.
->require
->ReferenceError: require is not defined

my os is OSX 10.9.4
chrome is 37.0.2062.94
thanks.

if i run it in the github, the msg is like below.

->Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' render.github.com render.githubusercontent.com https://gist-assets.github.com *.google-analytics.com https://collector-cdn.github.com".
requirify-browser.js:1(anonymous function) requirify-browser.js:1a requirify-browser.js:1t requirify-browser.js:1
->Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' render.github.com render.githubusercontent.com https://gist-assets.github.com *.google-analytics.com https://collector-cdn.github.com".

I don't get what this scoping issue is about. When I load a standalone script directly from browserify-cdn, like

<script src="http://wzrd.in/standalone/lodash@latest"></script>

the module is available on window.lodash.

So I don't understand the need for auto publishing modules, a proxy server, etc etc. All you have to do is write a function requirify(moduleName, cb) which injects this script tag in the web page, waits until the script is loaded, optionally moves the module to a custom namespace (like from window.lodash to window._), and invokes the callback function when ready.

Am I missing something obvious?

Yeah @josdejong, there were better ways to do this, this was the first way I figured out how to make it work. I've updated this post and script with simpler code pulling directly from wzrd.in.

wzrd.in doesn't work on https domains so if you try to use this when under a https page it fails with a mixed content warning

it was broken now

Can you use require to load request module before it is defined? Not work for me. Instead, I use chrome built in function fetch to accomplish it. Also I change wzrd.in's schema from "http" to "https" to prevent "Mixed Content" problem.

window.require = function(name, moduleName) {
    _require = require;

    if(!moduleName) {
        moduleName = name;
    }

    console.log('Fetching ' + moduleName + '... just one second');
    fetch('https://wzrd.in/bundle/' + moduleName + '@latest/')
        .then(response => response.text())
        .then(body => {
            require = null;
            eval(body);
            window[name] = require(moduleName);
            require = _require;
            console.log('Finished getting ' + moduleName);
        });
};

In the latest Chrome version it does not work and 'unsafe eval' / CSP console errors are thrown. By looking up on Stackoverflow - I found this answer useful, the module injector method worked for me on Chrome v77 on a blank page/tab dev tools console, as on today.

In the latest Chrome version it does not work and 'unsafe eval' / CSP console errors are thrown. By looking up on Stackoverflow - I found this answer useful, the module injector method worked for me on Chrome v77 on a blank page/tab dev tools console, as on today.

Thanks a lot for the tip.