phantomjs и requirejs

Question

коды в 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)), но не так, как описано выше. Я пытаюсь использовать requirejs, как main.js, это популярная проблема, я думаю. Спасибо!

Answer 1

вы недопонимание webpage.injectJs()

это для инъекций скриптов на страницу загружаемой, а не в среде phantomjs выполнения.

Так что использование .injectJs() делает загрузку requirejs на вашу страницу, а не в phantomjs.exe.

Сказанное, среда выполнения phantomjs имеет aproximation of commonjs. RequireJs не будет работать там по умолчанию. Если вы почувствовали, что особенно (ОЧЕНЬ) мотивированы, вы можете попытаться портировать требуемую мерку для nodejs, но она не работает из коробки и потребует невероятно глубокого понимания времени выполнения. для получения более подробной информации: http://requirejs.org/docs/node.html

лучшая идея: вероятно, вы должны убедиться, что у вас есть CommonJS версии вашей JavaScript, которые вы хотите запустить. Я лично пишу свой код в машинописном тексте, поэтому я могу построить для commonjs или amd. Я использую commonjs для кода phantomjs и amd для nodejs и браузера.

Answer 2

Я просто боролся в течение некоторого времени. Мое решение не чистое, но оно работает, и я доволен тем, что из-за недоделанной документации api от phantomjs.

Wordy information

Вам нужно три файла. Один из них - ваш тестовый файл 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 и страницы.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