为什么我无法使用PhantomJS 2.1.1渲染我的ReactJS应用程序？ [英] Why I am not able to render my ReactJS application using PhantomJS 2.1.1?

问题描述

为了使用webdriver.io测试我的反应应用程序，我需要使用phantomjs启动它。

In order to test my react app using webdriver.io, I need to launch it using phantomjs.

起初我认为问题是webdriver.io但是我我意识到PhantomJS在我尝试渲染时会返回一个空白页面。

At first I thought the problem was webdriver.io but I've realized that PhantomJS returns a blank page when I try to render.

为了进行一些测试，我写了这个javascript文件：

To make some tests I wrote this javascript file:

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

var output_file = 'example.png', url = args[1];
t = Date.now();

var width = 1440;
var height = 900;
page.viewportSize = { width: width, height: height };
page.paperSize = {
   format: 'A4',
   orientation: 'landscape',
   margin: { left: '1cm', right: '1cm', top: '1cm', bottom: '1cm' }
};

console.log(url);

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.onLoadFinished = function (status) {
    window.setTimeout(function () {
        try {
            page.evaluate(function (w, h) {
                document.body.style.width = w + 'px';
                document.body.style.height = h + 'px';
              }, width, height);
            t = Date.now() - t;
            console.log('Loading ' + url);
            console.log('Loading time ' + t + ' msec');
            page.clipRect = {top: 0, left: 0, width: width, height: height};
            page.render(output_file);
        }
        catch (e) {
            status = e.message;
        }
        console.log(status + ';;' + output_file);
        phantom.exit();
    }, 10000);
};

try {
    page.open(url);
    console.log('loading');
}
catch (ex) {
    console.log(ex.message);
    phantom.exit();
}

我这样推出： phantomjs test.js http：// localhost：8080

但不管我做什么， example.png 总是空的。

But no matter what I do, example.png is always empty.

我目前使用React 0.14.7和phantomjs 2.1.1。有没有人知道为什么我无法渲染我的应用程序？

I currently use React 0.14.7 and phantomjs 2.1.1. Does anybody have an idea about why I can't render my app ?

PS：我没有提到但我对chrome或firefox没有任何问题

PS: I have not mentioned but I have no problem with chrome or firefox

推荐答案

可能与PhantomJS中缺乏ES6支持有关。要查看我已将 page.onError（）回调添加到您的脚本中（总是很方便！）并打开一些React示例网站来获取此错误：

Probably has to do with the lack of ES6 support in PhantomJS. To check I added page.onError() callback to your script (always handy!) and opened some React example site to get this error:

ReferenceError：找不到变量：Symbol

要填充符号，可以注入 核心。 js 脚本从这个优秀的包进入页面，然后加载目标网址：

To polyfill Symbol one can inject a core.js script from this excellent package into the page before loading the target url:

page.onInitialized = function() {
    if(page.injectJs('core.js')){
        console.log("Polyfills loaded");
    }    
}

但这是打开外部网站的。如果正在测试的网站正在开发中（如localhost网址所示），您可能只需配置babel，如此答案所示。

But that's for opening external sites. If the site that's being tested is under your development (as localhost url suggests) you probably could do with just configuring babel as is shown in this answer.

这篇关于为什么我无法使用PhantomJS 2.1.1渲染我的ReactJS应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！