browserify and document ready?

Question

I\'m struggling with using Browserify and document ready events. How do I craft a module that exports content only available after the document ready event has fired? How do I

Answer 1

This works for me in one project, not sure it can work always.

Put the script, for example: <script src="/path/to/main.js"></script> right before </body>.

In the file going to be browserify the-file.js -o main.js.

// the-file.js:

var $ = require("jquery");

//......

window.$ = $;  // window is the global object in browsers
$(document).ready(function(){
    // all the old things here ....
});

Another way might be better:

// the-file.js:

var $ = require("jquery");

//......

(function($){

    $(document).ready(function(){
        // all the old things here ....
    });

})($); // Anonymous function get called with $.

Answer 2

I would suggest to use window.onload Something along the lines of

const main = () => {

//Your logic here

}

window.onload = main;

Answer 3

Usually you have one master file that fires up the entire application, so you can simply wrap it in the ready callback. It doesn't make much sense to do anything before the document is ready anyway. Sure you could return a function in every single file that does DOM manipulation, but that would turn into a mess quickly.

document.addEventListener('DOMContentLoaded', function () {
    var app = require('./app');
    // ...
});

Answer 4

Try this:

var domready = require("domready");

domready(function () {
    exports.something = /* whatever you want */
});

You'll need to download the domready package:

npm install domready

Then just use browserify:

browserify input.js -o output.js

Yes. It's that simple.

---

Consider that we have two files: library.js and main.js.

// library.js

var domready = require("domready");

domready(function () {
    exports.test = "Hello World!";
});

// main.js

var library = require("./library");
var domready = require("domready");

domready(function () {
    alert(library.test);
});

As long as you require your library before you register your main domready function you should be able to use your library seamlessly.

---

Sometimes you may wish to set module.exports to a function. In that case you can use the following hack:

// library.js

var domready = require("domready");

module.exports = function () {
    return exports._call.apply(this, arguments);
};

domready(function () {
    exports._call = function () {
        alert("Hello World!");
    };
});

// main.js

var library = require("./library");
var domready = require("domready");

domready(function () {
    library();
});

Note that the _call property is not in any way special.

Answer 5

Instead of listening for a ready event, you can put your browserify bundle in a deferred script tag:

<script src="bundle.js" defer></script>

This allows you to remove the ready wrapper completely since the bundle will not be executed until the DOM is loaded.

Unfortunately support of defer is patchy, and I don't recommend it unless you don't have to support IE < 10. Consider this answer one for the future, as browser support for it grows.