2015-10-21 41 views
3

有沒有一種方法可以讓PhantomJS本身支持ES6,我有一堆ES6代碼通過Babel轉換爲ES5,我需要完成的是準確測量代碼覆蓋率, ES6代碼而不是ES5。這是客戶的要求,所以我不能只告訴他停止請求這樣的事情......對PhantomJS中的ES6的原生支持

Afaik NodeJS已經有ES6的本機支持,有沒有辦法用PhantomJS來做到這一點?

+0

我認爲與PhantomJS 2使它更容易使用一個較新的WebKit版本,這可能仍然是很多工作。祝你好運。使用已支持ES6的瀏覽器可能更容易。 –

+0

巴別爾也打算在舊系統上運行。幻影上的失敗是什麼?聽起來就像你問了兩個問題:1.我如何填充幻影? 2.我如何獲得ES6代碼的覆蓋? – loganfsmyth

+0

它給代碼覆蓋率提供了錯誤的觀點,當使用babel時代碼覆蓋率的結果是針對ES5調用進行的...... – Lu4

回答

2

我已經結束了使用原始的NodeJS(不含PhantomJs)+快速+ JSDom(https://github.com/tmpvar/jsdom),POC的是這樣的:

"use strict" 

const $module = require('module'); 
const path = require('path'); 
const babel = require("babel-core"); 
const Jasmine = require('jasmine'); 
const reporters = require('jasmine-reporters'); 
const express = require('express'); 
const jsdom = require("jsdom"); 
const app = express(); 
const vm = require('vm'); 
const fs = require("fs"); 

app.get('/', function (req, res) { 
    res.sendFile('index.html', { root: __dirname }); 
}); 

app.use('/bower_components', express.static('bower_components')); 

const load = function (filename) { 
    return fs.readFileSync(`./bower_components/${filename}`, "utf-8"); 
}; 

const packages = [ 
    fs.readFileSync('./bower_components/jquery/dist/jquery.js', "utf-8"), 
    fs.readFileSync('./bower_components/angular/angular.js', "utf-8"), 
    fs.readFileSync('./bower_components/angular-mocks/angular-mocks.js', "utf-8") 
]; 

const sut = { 
    './js/code.js': fs.readFileSync('./js/code.js', "utf-8") 
}; 

const tests = { 
    './tests/test.js': fs.readFileSync('./tests/test.js', "utf-8") 
}; 

function navigate(FakeFileSystem, root, cwd, filename) { 
    // Normalize path according to root 
    let relative = path.relative(root, path.resolve(root, cwd, filename)); 
    let parts = relative.split(path.sep); 
    let iterator = FakeFileSystem; 

    for (let part of parts) { 
     iterator = iterator[part] || (iterator[part] = { }); 
    } 

    return iterator; 
} 

const server = app.listen(3333, function() { 
    const host = server.address().address; 
    const port = server.address().port; 

    const url = `http://${host === '::' ? 'localhost' : host}:${port}`; 

    console.log(`Server launched at ${ url }`); 
    console.log(`Running tests...`) 

    jsdom.env({ 
     url: url, 
     src: packages, 
     done: function (err, window) { 
      let jasmine = new Jasmine(); 

      let FakeFileSystem = {}; 

      let descriptors = []; 

      jasmine.configureDefaultReporter({ showColors: true }); 

      let env = jasmine.env; 

      for (let propertyName in env) { 
       if (env.hasOwnProperty(propertyName)) { 
        window[propertyName] = env[propertyName]; 
       } 
      } 

      let context = vm.createContext(window); 
      let collections = [sut, tests]; 

      for (let collection of collections) { 
       for (let filename in collection) { 
        let descriptor = navigate(FakeFileSystem, __dirname, '.', filename); 
        let source = collection[filename]; 
        let transpiled = babel.transform(source, { "plugins": ["transform-es2015-modules-commonjs"] }); 
        let code = $module.wrap(transpiled.code); 

        let _exports = {}; 
        let _module = { exports: _exports }; 

        descriptor.code = vm.runInContext(code, context); 
        descriptor.module = _module; 
        descriptor.exports = _exports; 
        descriptor.filename = filename; 

        descriptors.push(descriptor); 
       } 
      } 

      for (let descriptor of descriptors) { 
       let cwd = path.dirname(path.relative(__dirname, descriptor.filename)); 

       descriptor.code.call(
        undefined, 
        descriptor.exports, 

        // Closure is used to capture cwd 
        (function (cwd) { 
         return function (filename) { // Fake require function 
          return navigate(FakeFileSystem, __dirname, cwd, filename).exports; 
         } 
        })(cwd), 

        descriptor.module, 
        descriptor.filename 
       ); 
      } 

      jasmine.execute(); 

      server.close(); 
     } 
    }); 
}); 

這種方法的好處是,有在transpiling沒有必要有通天的代碼,它允許前端軟件包,如角擺脫涼亭加載,而所有配置的東西來自NPM ...

編輯

我基於這樣的事實的NodeJS不支持迷迷糊糊所有的ES6功能,以及這樣的功能由於ES6模塊是一個真正的痛苦,他們不支持任何地方,所以我最終用babel進行了部分代碼轉換,期望當NodeJS開始爲ES6提供更豐富和更豐富的支持時,我最終會轉向-off babel功能一步一步,並切換到本地支持時,它將成爲可用...