PhantomJS 中的 RequireJS 错误，但 Chrome/FireFox 中没有答案

【问题标题】：RequireJS errors in PhantomJS but not Chrome/FireFoxPhantomJS 中的 RequireJS 错误，但 Chrome/FireFox 中没有
【发布时间】：2024-01-05 22:15:01
【问题描述】：

我在同一个目录中有两个文件：

<html>
<head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
    <script type="text/javascript">
        require(["fakeTest"], function () {});
    </script>
</head>
<body>
</body>
</html>

和

define(["require", "exports"], function (require, exports) {
    alert('foo');
});

如果我在 Chrome/FireFox 中运行它，我会得到我所期望的。如果我尝试从 CMD 运行：

phantomjs --remote-debugger-port=9000 testFile.html

我得到错误：

错误：找不到模块“fakeTest”

phantomjs://bootstrap.js:299 in require
phantomjs://bootstrap.js:263 in 要求

我已经尝试过使用最新的 PhantomJS 和旧版本，与 RequireJS 相同。我已经查看了整个谷歌，但无法找到任何解决方案。我让其他人在他们的计算机上尝试过这个，他们也看到了同样的问题。我已经尽可能地简化了这些文件，但我不确定现在还可以尝试什么。

【问题讨论】：

标签： javascript requirejs phantomjs

【解决方案1】：

如果你是直接运行 PhantomJS，那么你需要创建一个脚本来加载页面。请参见下面的示例。也就是说，如果您正在尝试测试您的网页，headless testing frameworks 旨在与 PhantomJS 一起使用。这些框架负责在运行测试时加载 HTML、脚本和其他资源的细节。就个人而言，我使用Karma Test Runner 和karma-requirejs plugin 来运行单元测试。

如果你想直接运行 PhatomJS，你需要创建一个脚本来打开 HTML 页面。在下面的简单示例 run.js 中，打开了“testFile.html”页面，并打印了页面的标题。然后它设置一个 100 毫秒的超时时间，再次打印标题并退出。

var page = require('webpage').create();

page.open('testFile.html', function(status) {
  var title = page.evaluate(function() {
    return document.title;
  });
  console.log('Page title is ' + title);
  setTimeout(function () {
    var title  = page.evaluate(function () {
      return document.title;
    });
    console.log('Page title is ' + title);
    phantom.exit()
  }, 100);
});

以下是运行命令的输出示例：

phantomjs run.js 
Page title is Original Title
Page title is Title Updated

超时的原因是 AMD 模块是异步加载的，您需要在 run.js 脚本中构建一种方法来考虑 AMD 模块的异步特性。我强烈建议使用与 RequireJS 集成的现有测试运行器之一，而不是重新发明*。

要查看实际情况，请将您的 testFile.html 修改为：

<html>
<head>
    <title>Original Title</title>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js">    
    </script>
    <script type="text/javascript">
        require(["fakeTest"], function () {});
    </script>
</head>
<body>
</body>
</html>

而 fakeTest.js 是：

define(["require", "exports"], function (require, exports) {
  document.title = 'Title Updated';
});

【讨论】：