Error: Cannot find module 'node-jsdom

Question

我有两个文件 todosController.js 和 index.html。我正在尝试访问一个元素并在 javascript 控制台中查看它的输出。这是代码：

<!--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)

非常感谢您的回复。

Answer 1

我稍微扭曲了你的代码，所以就这样了

<!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。

希望对您有所帮助！

Answer 2

在您的 JS 和运行 JS 文件的开头添加此代码，而不是运行ning HTML（将 foo.html 替换为您的 JS 文件的路径到您的 HTML 文件）：

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

然后尝试以 doc 访问 document，看看是否可行。

问题是，document 仅在浏览器环境中定义，而不是在 WebStorm 控制台中定义，这就是为什么您的代码在 Chrome 中工作（我不是 WebStorm 的专家，但是我相信它是运行未定义 document 的 nodeJS 环境中的 JS 代码）。

看看 this 线程（这也是我从中获取上述示例的地方）。

Answer 3

请尝试在 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

这应该可以做到

Error: Cannot find module 'node-jsdom

Error: Cannot find module 'node-jsdom

html

javascript

webstorm