2016-04-08 4 views
1

Я пытаюсь сделать простую страницу с JS-модулем, который сделает что-то со страницей. Мне нужно использовать модули node.js, поэтому я изучаю, как выполнять прорисовку работ.Невозможно вызвать функцию модуля после браузера

Мой HTML:

<!doctype html> 
<html> 
    <head> 
     <script src="js/bundle.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <p>Hello world!</p> 
    <script type="text/javascript"> 
     var test = require("./test.js"); 
     test.init(); 
    </script> 
    </body> 
</html> 

Это мой JavaScript (test.js):

"use strict"; 

alert("here1"); 

var init = function() { 
    alert("here2"); 
} 

exports.init = init 

Я делаю связку с:

browserify.cmd test.js -o bundle.js 

Когда я пытаясь открыть страницу, она показывает «here1», но не показывает «here2». В консоли браузера я вижу:

Uncaught ReferenceError: require is not defined  index.html:9 

Любые идеи, как сделать функцию модуля (INIT) хорошо работать?

+0

потому требуют не родная JS функции, она должна быть использована в вашем test.js как что что браузер использует для объединения ваших модулей – ronster37

+0

Но как я могу получить доступ к функции, определенной в test.js из html/embedded js? –

ответ

3

Вам необходимо поместить весь код JavaScript, который содержит что-нибудь из Node в файле test.js, который вы затем конвертируете с браузером в te bundle.js. В вашем примере вы используете функцию Node require в index.html, которая не будет преобразована. Браузер затем видит функцию require(), которую он не знает, и здесь проблема скрыта.

Проще говоря: весь ваш javascript-код (содержащий Node) должен быть включен в ваш index.html как единый bundle.js который является подтвержденным поиском результатов из исходных файлов.

EDIT

Browserify нет (по умолчанию) позволяет вызвать любую функцию browserified из browserified кода. Но вы можете сделать это доступным, добавив функцию в область window.

Это test.js (который затем преобразуется в bundle.js по browserify) и index.html

"use strict"; 
 

 
alert("here1"); 
 

 
window.init = function() { 
 
    alert("here2"); 
 
}
<!doctype html> 
 
<html> 
 

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

 
<body> 
 
    <p>Hello world!</p> 
 
    <script type="text/javascript"> 
 
\t init(); 
 
    </script> 
 
</body> 
 

 
</html>

+0

Основная проблема, по которой я не понимаю, как получить доступ к функции, определенной в test.js (при ее просмотре) из html/embedded js. –

+0

Aha! Необходимость вызывать его из встроенного кода в первоначальном вопросе не ясна. Я отредактировал ответ, это можно сделать, связав вашу функцию с областью окна. –