【问题标题】:phantomjs and requirejsphantomjs 和 requirejs
【发布时间】:2012-06-26 06:47:07
【问题描述】:

main.js 文件中的代码如下:

      phantom.injectJs("libs/require-1.0.7.js");
      require.config(
        {
          baseUrl: "" 
        }
      );
      require([], function(){});

当我在命令行中运行“phantomjs main.js”时,requirejs 在 main.js 中无法正常工作。我知道如何在浏览器中运行的页面中使用requirejs(包括phantomjs的方式:page.open(url,callback)),但不像上面那样。我尝试使用像 main.js 这样的 requirejs,我认为这是一个流行的问题。谢谢!

【问题讨论】:

  • 你有想过这个吗?
  • 我更进一步......你可以像这样访问实际的 requirejs 要求变量: require = null; phantom.injectJs('target/dependencies/requirejs-tar.gz/require.js');
  • @Thomas,我会试试你的方法,:)
  • 我放弃了让它很好地工作,而是使用tech-gym.com/2011/11/javascript/572.html(日语)中的方法,该方法位于github上:github.com/azu/AMDTesting,来自github.com/rpflorence/non-trivial-js中的示例代码......我还即时生成 HTML 页面,以避免对我想要运行的测试进行硬编码,这又增加了一层疯狂。如果你有更简单的工作,我很想听听!
  • 我有点不确定这是否与我的问题相同,所以我在这里提出了一个新问题:stackoverflow.com/questions/12187669/…

标签: requirejs phantomjs


【解决方案1】:

我只是挣扎了一段时间。我的解决方案并不干净,但它可以工作,而且由于 phantomjs 未完成的 api 文档,我对此感到满意。

冗长的解释

您需要三个文件。一个是您的 amd phantomjs 测试文件,我将其称为“amd.js”。第二个是要加载的 html 页面,我将其命名为“amd.html”。最后是我称之为“amdTestModule.js”的浏览器测试。

在 amd.html 中,正常声明你的脚本标签:

<script data-main="amdTestModule.js" src="require.js"></script>

在您的 phantomjs 测试文件中,这就是它变得 hacky 的地方。创建您的页面,并加载到“fs”模块中。这允许您打开相对文件路径。

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

page.open('file://' + fs.absolute('tests/amd.html'));

现在由于 requirejs 异步加载文件,我们不能只将回调传递给 page.open 并期望事情顺利进行。我们需要一些方法
1) 在浏览器中测试我们的模块并将结果传回给我们的 phantomjs 上下文。或者
2) 告诉我们的 phantomjs 上下文,在加载所有资源后,运行测试。

#1 对我来说更简单。我通过以下方式完成了此操作:

page.onConsoleMessage = function(msg) {
    msg = msg.split('=');
    if (msg[1] === 'success') {
        console.log('amd test successful');
    } else {
        console.log('amd test failed');
    }
    phantom.exit();
};

**请参阅下面的完整代码以获取我的 console.log 消息。

现在 phantomjs 显然有一个内置的事件 api,但它没有记录。我还成功地从他们的 page.onResourceReceived 和 page.onResourceRequested 获取请求/响应消息 - 这意味着您可以在加载所有必需模块时进行调试。然而,为了传达我的测试结果,我只使用了 console.log。

如果 console.log 消息从未运行过会怎样?我能想到解决这个问题的唯一方法是使用 setTimeout

setTimeout(function() {
    console.log('amd test failed - timeout');
    phantom.exit();
}, 500);

应该这样做!

完整代码

目录结构

/projectRoot  
  /tests  
    - amd.js  
    - amdTestModule.js  
    - amd.html  
    - require.js (which I symlinked)  
    - <dependencies> (also symlinked)

amd.js

'use strict';
var page = require('webpage').create();
var fs = require('fs');

/*
page.onResourceRequested = function(req) {
    console.log('\n');
    console.log('REQUEST');
    console.log(JSON.stringify(req, null, 4));
    console.log('\n');
};
page.onResourceReceived = function(response) {
    console.log('\n');
    console.log('RESPONSE');
    console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response, null, 4));
    console.log('\n');
};
*/

page.onConsoleMessage = function(msg) {
    msg = msg.split('=');
    if (msg[1] === 'success') {
        console.log('amd test successful');
    } else {
        console.log('amd test failed');
    }
    phantom.exit();
};

page.open('file://' + fs.absolute('tests/amd.html'));

setTimeout(function() {
    console.log('amd test failed - timeout');
    phantom.exit();
}, 500);

amd.html

<!DOCTYPE html>
<html>

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

<body>
    <script data-main='amdTestModule.js' src='require.js'></script>
</body>

</html>

amdTestModule.js

require([<dependencies>], function(<dependencies>) {
    ...
    console.log(
        (<test>) ? "test=success" : "test=failed"
    );
});

控制台

$ phantomjs tests/amd.js
amd test successful

【讨论】:

    【解决方案2】:

    你误解了webpage.injectJs()

    它用于将脚本注入到您正在加载的页面中,而不是注入到 phantomjs 运行时环境中。

    因此,使用 .injectJs() 会使 requirejs 加载到您的页面中,而不是加载到 phantomjs.exe 中。

    也就是说,phantomjs 的运行环境近似于 commonjs。默认情况下,RequireJs 不会在那里运行。如果你觉得特别(非常)有动力,你可以尝试移植为 nodejs 制作的 require-shim,但它不能开箱即用,并且需要对运行时有非常深刻的理解。更多详情:http://requirejs.org/docs/node.html

    更好的主意: 可能你应该确保你有你想要运行的 javascript 的 commonjs 版本。我个人用打字稿编写代码,因此我可以为 commonjs 或 amd 构建代码。我将 commonjs 用于 phantomjs 代码,将 amd 用于 nodejs 和浏览器。

    【讨论】:

      猜你喜欢
      • 2016-04-25
      • 1970-01-01
      • 2013-10-27
      • 1970-01-01
      • 1970-01-01
      • 2012-02-05
      • 2014-08-04
      • 2017-08-28
      • 1970-01-01
      相关资源
      最近更新 更多