瀏覽器無法調用模塊的功能

我想用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）會奏效嗎？

來源

2016-04-08 Valentin Pimenov

因爲要求是不是原生js函數（然後由browserify轉化爲bundle.js），它應該在你的test.js爲使用是什麼browserify用來捆綁你的模塊 – ronster37

但我怎麼能夠訪問從HTML /嵌入式js test.js中定義的函數？ –

您需要將包含節點中所有內容的所有JavaScript代碼放在test.js文件中，然後您將該文件轉換成te bundle.js。在您的示例中，您正在index.html中使用節點功能require，該功能不會被轉換。瀏覽器然後看到他不知道的功能require()，這是隱藏問題的地方。

簡單地說：您的所有JavaScript代碼（包含節點）必須作爲單個bundle.js包含在您的index.html中，這是您的源文件的瀏覽結果。

編輯

Browserify沒有（默認情況下）允許您調用任何browserified功能出browserified代碼。但是您可以通過將函數附加到window範圍內來使其可用。

這是test.js和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>

來源

2016-04-08 23:03:54

我不明白如何從html/embedded js訪問test.js中定義的函數（當它被瀏覽時）的主要問題。 –

啊哈！在最初的問題中，從嵌入代碼調用它的需求並不明確。我編輯了答案，它可以通過將你的函數附加到窗口範圍中來完成。 –

瀏覽器無法調用模塊的功能

回答

相關問題