Dave Pile Dave Pile - 1 month ago 22
Javascript Question

Browserify, how to access main.js functions

I can get browserify working but am a little confused about how to access the functions in bundle.js from the DOM.

I have three files-

message.js

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


main.js

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

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

//cannot find this function from index.html
function fnClick(){
alert(getMessage());
}


index.html

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


In the browser when the script loads
alert(getMessage());
in main.js shows the alert but debugger, fnClick is undefined and I can work the scope.

Thanks

Answer

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 even listener in your 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)