jeromeetienne / dropinrequire.js

dropin replacement for require() in browser

Drop-In require

dropinrequire.js is a drop-in replacement for commonjs module in a browser. No server to run, No preprocessing of javascript files. It is very simple it needs only 20-lines of js.

It is designed for rapid prototyping, not for production (see details). If you are in a rush, are using node.js and are willing to share code with your browser without hassle, dropinrequire.js is for you.

How to use it

You just include this in your webpage

<script type="text/javascript" src="./dropin_require.js"></script>

And after that you can use require(filename) to import your node module in the web browser. Suppose you got a module foobar.js

exports.foo	= "bar";

then this html will display bar. Here it is a demo to show, and not tell.

<script src="../dropin_require.js"></script>
<script>
    alert( require('./foobar.js').foo );
</script>

Performance vs Compatibility

dropinrequire.js goals were to be short and compatible. The compatibility part is the painfull one. Nodejs require is synchronous, so when you require you dont do anything else. To ensure compatibility, dropinrequire must be synchronous too. But It is ok for nodejs because reading files from local disks is fast, much faster than network transfert. The same doesnt apply in the browser. Because of compatibility, dropinrequire.js relies on synchronous xhr which have signficant performance issues. maybe one day i will incude a cache in LocalStorage. For now, i recommend brequire for production. It does require you to preprocess your js files on the server, but it is in the same spirit than dropinrequire.js, small and clean.

About

The code is available on github under MIT license and has been written by Jerome Etienne. That's it. No fuss no muss.

dropinrequire.js's Issues

[EXPIRED] Page-based loading

There are a lot of JS loaders, really. But none of them, at least within documentation, addresses a problem I'm eager to solve. That is to use single <script> line per whole project which inits page-based loading of dependencies.

Let's create a simple project with index, portfolio, and contacts pages.

Microframework will help us with routing:

$app->get('/portfolio/',
    function () use ($app) {
        $prices = array(
              "price_mine"  => "90",
              "price_rival" => "120"
        );
        $app->render('portfolio.twig', $prices);
    })->name('portfolio');

Template engine will help us with rendering:

{% extends "base.twig" %}
{% block content %}
     <p>Aren't you sick and tired to pay {{price_rival}}…</p>.
{% endblock content %}

And the missing part in every page is <script src="/static/init.js"></script> that works as follows

• all pages load jQuery from CDN or from my server as fallback,
• index loads SoundManager to serve audio salutation,
• portfolio loads Lightbox to serve images,
• contacts loads Forms validator.

What's the best way to achieve it?
And how to do that with Dropinrequire.js whether it's possible?

Thank you in advance.
Warm regards from Russia, Alexander.