phantomjs i requirejs

Question

kody main.js plików jest tak:

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

gdy uruchamiam "phantomjs main.js" w linii poleceń, requirejs nie działa dobrze w main.js. Wiem, jak używać requirejs na stronie działającej w przeglądarce (w tym sposób phantomjs: page.open (url, callback)), ale nie jak wyżej. Próbuję użyć requirejs jak main.js, jest to popularny problem, jak sądzę. Dziękuję Ci!

Answer 1

jesteś nieporozumienie webpage.injectJs()

to do wtryskiwania skrypty na stronę ładowanego, nie do środowiska phantomjs wykonawczego.

Używanie .injectJs() powoduje, że requirewy ładuje się na twoją stronę, a nie na phantomjs.exe.

To powiedziawszy, środowisko uruchomieniowe phantomjs ma aproksymację commonjs. RequireJs domyślnie nie będzie tam uruchomiony. Jeśli czujesz się szczególnie (BARDZO) zmotywowany, możesz spróbować przenieść wymaganą shim dla nodejów, ale to nie działa po wyjęciu z pudełka i wymagałoby niewiarygodnie głębokiego zrozumienia runtimes. Więcej szczegółów: http://requirejs.org/docs/node.html

lepszy pomysł: prawdopodobnie należy upewnić się, że commonjs wersje JavaScript chcesz uruchomić. Osobiście piszę mój kod maszynopisowy, więc mogę zbudować dla zwykłego lub amd. Używam commonjs dla kodu phantomjs i amd dla nodejs i przeglądarki.

Answer 2

Po prostu walczyłem przez jakiś czas. Moje rozwiązanie nie jest czyste, ale działa, i cieszę się z tego z powodu niedokończonej dokumentacji api z phantomjs.

Uporczywe wyjaśnienie

Potrzebujesz trzech plików. Jednym z nich jest plik testowy amd phantomjs, który nazwałbym "amd.js". Druga strona to ładowanie strony html, którą nazwałbym "amd.html". Na koniec test przeglądarki, który nazwałem "amdTestModule.js".

W amd.html oświadczyć tag skryptu za normalne:

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

W pliku testowego phantomjs, to jest, gdy robi się hacky. Utwórz swoją stronę i załaduj do modułu "fs". Pozwala to otworzyć względną ścieżkę pliku.

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

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

Teraz od requirejs ładuje pliki asynchronicznie, nie możemy po prostu przejść w zwrotnego do page.open i oczekują rzeczy pójść gładko. Potrzebujemy jakiegoś sposobu na:
1) Przetestuj nasz moduł w przeglądarce i przekaż wynik do naszego kontekstu phantomjs. Lub
2) Poinformuj nasz kontekst phantomjs, że po załadowaniu wszystkich zasobów, aby uruchomić test.

# 1 był prostszy w moim przypadku. I dokonał tego poprzez:

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

** Zobacz pełny kod poniżej dla mojego console.log wiadomości.

Teraz phantomjs ma wbudowane zdarzenie api, ale jest nieudokumentowane. Z powodzeniem udało mi się uzyskać komunikaty żądania/odpowiedzi z ich strony.onResourceReceived i strony.onResourceRequested - co oznacza, że ​​możesz debugować po załadowaniu wszystkich wymaganych modułów. Aby jednak zakomunikować wynik testu, użyłem konsoli console.log.

Co się stanie, jeśli komunikat console.log nigdy nie zostanie uruchomiony? Jedynym sposobem, jaki mogłem wymyślić, aby rozwiązać ten problem, było użycie setTimeout

To powinno wystarczyć!

pełny kod

struktura katalogów

/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" 
    ); 
}); 

konsola

$ phantomjs tests/amd.js 
amd test successful