錯誤：無法找到模塊'node-jsdom

-1

我有兩個文件todosController.js和index.html。我試圖訪問一個元素，並在javascript控制檯中查看它的輸出。這裏是代碼：錯誤：無法找到模塊'node-jsdom

<!--index.html:--> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>TodosList</title> 
</head> 
<body> 
    <h1>Todos List</h1> 
    <button id="displayTodosButton">Display Todos</button> 
    <!--index.html is linked to javascript file todosController.js--> 
    <script src="todosController.js"></script> 
</body> 
</html>

下面是JavaScript代碼：

//todosController.js 

var jsdom = require("node-jsdom"); 
var fs = require("fs"); 
var jquery = fs.readFileSync("./jquery.js", "utf-8"); 

jsdom.env({ 
url: "http://news.ycombinator.com/", 
src: [jquery], 
done: function (errors, window) { 
    var $ = window.$; 
    console.log("HN Links"); 
    $("td.title:not(:last) a").each(function() { 
     console.log(" -", $(this).text()); 
    }); 
} 
}); 
let markup = fs.readFileSync('foo.html'); 
let doc = jsdom(markup, {}); 

function showData() { 
    elem = doc.getElementById('TodosText').value; 
} 

showData();

我使用Webstorm作爲IDE.I試圖在以下一些問題的答案特別建議安裝NPM jsdom但問題是還是一樣。

以下是錯誤：

module.js:538 
    throw err; 
    ^

Error: Cannot find module 'node-jsdom' 
    at Function.Module._resolveFilename (module.js:536:15) 
    at Function.Module._load (module.js:466:25) 
    at Module.require (module.js:579:17) 
    at require (internal/module.js:11:18) 
    at Object.<anonymous> 
    (/Users/muhammadtayyabsaeed/WebstormProjects/Todo 
    List/js/todosController.js:89:13) 
    at Module._compile (module.js:635:30) 
    at Object.Module._extensions..js (module.js:646:10) 
    at Module.load (module.js:554:32) 
    at tryModuleLoad (module.js:497:12) 
    at Function.Module._load (module.js:489:3)

我很感激你的反應。

來源

2017-11-11 Tayyab

你在瀏覽器中運行代碼的東西嗎？ – Taurus

'js文件夾，裏面有todosController.js.'你說你有js文件夾，但是我在'src'裏看不到'？ –

與控制檯，你的意思是瀏覽器控制檯或js /節點控制檯？ – marmeladze

請儘量創造WebStorm以下項目：

的package.json：

{ 
    "name": "node_dom", 
    "version": "0.0.1", 
    "dependencies": { 
    "jsdom": "^11.3.0" 
    } 
}

todosController.js

const jsdom = require("jsdom/lib/old-api.js"); 
const jsdom_hard = require("jsdom/lib/old-api.js").jsdom; 
const fs = require('fs'); 

jsdom.env(
    "http://news.ycombinator.com/", 
    ["http://code.jquery.com/jquery.js"], 
    function(err, window) { 
    const $ = window.$; 
    console.log("HN Links"); 
    $("td.title:not(:last) a").each(function() { 
     console.log(" -", $(this).text()); 
    }); 
    } 
); 

let markup = fs.readFileSync('foo.html'); 
let doc = jsdom_hard(markup, {}); 


function showData() { 
    elem = doc.getElementById('TodosText').innerHTML; 
    console.log("Element value: " + elem) 
} 

showData();

foo.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>TodosList</title> 
</head> 
<body> 
<div id="TodosText">Hello!!</div> 
</body> 
</html>

右鍵單擊的package.json，選擇Run "npm install"
一旦安裝依賴關係，右鍵單擊todosController。JS，選擇Run

本應該做的

來源

2017-11-11 18:45:46 lena

我在這一行收到一個錯誤'const jsdom = require（「jsdom/lib/old-api.js」）;' 以下是我遇到的以下問題。當我添加一些按鈕來執行一些事件監聽時，我沒有得到輸出 'let displayTodosButton = doc.getElementById（'displayTodosButton'）; console.log（displayTodosButton）;' 它不起作用。另外，當我在代碼中放置一些聲明函數時，它們在瀏覽器控制檯中不提供任何輸出，而在webstrom控制檯中執行。當我在瀏覽器控制檯中放置相同的方法聲明時，它們會給出輸出......它非常令人困惑...... – Tayyab

這裏是鏈接到回購的地方，我只是把代碼支持我的上述評論以供進一步說明：https：// github.com/MTayyabSaeed/todos-list-javascript ...我按照上面解釋的方法做了同樣的處理... – Tayyab

你在「require」行看到了什麼錯誤？你爲什麼期望在瀏覽器控制檯中看到任何東西？ 'console.log（displayTodosButton）'不是監聽器，它只是輸出HTMLElement – lena

我扭你的代碼一點點，所以這裏有雲

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>TodosList</title> 
 
</head> 
 

 
<body> 
 
    <h1>Todos List</h1> 
 
    <input type="text" id="TodosText"> 
 
    <input type="button" id="displayTodosButton" value="Display Todos" onClick="showData();"> 
 

 
    <script> 
 
    function showData() { 
 
     elem = document.getElementById('TodosText').value; 
 
     console.log(elem); 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

在此示例中，我把這個腳本在HTML文件中，但隨時爲您希望使用。還添加了一個文本字段，並將按鈕更改爲一個簡單的HTML和對其調用showData。

希望它有幫助！

來源

2017-11-11 13:39:46 Jose

我的代碼在瀏覽器中工作，但不在webstrom中。所以你的解決方案不能幫助這個問題，因爲我試圖根據需要修改它。我不想在html中使用腳本。 – Tayyab

對不起@Tayyab，你是對的，我也沒有注意到Webstorm！我的錯。 – Jose

webstorm不運行代碼，所以語句'代碼在webstorm中不起作用「是沒有意義的。似乎你正在用node.js運行你的代碼，而不是在瀏覽器中加載它。 **在javascript文件右鍵菜單中運行**命令可以使用Node.js運行它。 **運行**命令在HTML文件右鍵菜單中打開瀏覽器中的應用程序 – lena

在你的JS的開頭添加該代碼並運行JS文件，而不是運行HTML（與你的JS文件到您的HTML文件的路徑替換foo.html）：

var fs = require('fs'); 
var jsdom = require("jsdom").jsdom; 
var markup = fs.readFileSync('foo.html'); 
var doc = jsdom(markup, {});

然後嘗試訪問document作爲doc而不是看看是否有效。

事情是，document只在瀏覽器環境中定義，而不是在WebStorm控制檯中定義，這就是您的代碼在Chrome中工作的原因（我不是WebStorm的專家，但我相信它在nodeJS中運行JS代碼未定義document的環境）。

看看this線程（這也是我搶奪上述示例的地方）。

來源

2017-11-11 13:42:18 Taurus

我收到此錯誤： module.js：529 throw err; ^ 錯誤：在Function.Module._resolveFilename找不到模塊 'jsdom' （module.js：527：15）在Function.Module._load（module.js：476：23）在Module.require（ module.js：568：17） at require（internal/module.js：11：18） at Object。（Module.js：624：30）（在Module.js：635：10） at Module（（List/js/todosController.js：89：13） at Module._compile （module.js：545：32） at tryModuleLoad（module.js：508：12） at Function.Module._load（module.js：500：3） – Tayyab

然後，您需要包含[「jsdom」 ]（https://www.npmjs.com/package/node-jsdom）節點模塊。 – Taurus

我試圖在我的Mac上安裝，但安裝時遇到了很多錯誤。所以現在安裝過程中出現錯誤。然後我試圖運行它，它沒有奏效。然後，我將他們的代碼包括進來，他們提出了類似的方式，但仍然沒有運氣。 @Taurus – Tayyab

錯誤：無法找到模塊'node-jsdom

回答

相關問題