错误：找不到模块"节点-jsdom"

我有两个文件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。我尝试安装 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)

感谢您的回复。

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

这应该做这件事

在 JS 的开头添加此代码并运行 JS 文件而不是运行 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 代码(。

看看这个线程(这也是我从中抓取上面的例子的地方(。

我稍微

扭曲了你的代码，所以它在这里

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

希望对您有所帮助！

相关内容

最新更新

热门标签：