Browserify, how to access main.js functions

Any code in entry file is executed in the closure. If you look at the created bundle.js, you will see something like this in there.

function(require, module, exports) {
    function fnClick() {
        alert(getMessage());
    }
}

Anything you create in here will be just hidden to global space unless you explicitly use window object (but don't do that) to expose it.

As @elclanrs said in comments above, just attach the event listener in your main.js code instead of HTML. If you don't want to use external libraries, you can do it hard way.

var button = document.getElementById('my-button'); // add id="my-button" into html
button.addEventListener('click', fnClick);

Or with library like popular jQuery you would just call.

$('#my-button').click(fnClick)

1) install dom-event-listener as for: https://www.npmjs.com/package/dom-event-listener

2) in main.js add something like:

var domEventListener = require('dom-event-listener');
var element = document.getElementById('my-button');
domEventListener.add(element, 'click', function(event) {
    console.log(event);
});

Perhaps, you would like to consider domready package? See browserify and document ready? for a great example.

If you are usind domready, your example will become like this:

message.js (stays the same)

module.exports = function (){
   return "Hello";
};

main.js (take note of the changes)

var domready = require("domready");
var getMessage = require('./message');

domready(function () {

   //This shows the alert when script loads
   alert(getMessage());

   function fnClick(){
    alert(getMessage());
   }     
});

index.html (stays the same)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/bundle.js"></script>
</head>
<body>
    <button onclick="fnClick();">Click</button>
</body>
</html>

Tags:

Javascript

Browserify

Recent Posts