PhantomJS 中对 ES6 的原生支持

Question

有没有办法让 PhantomJS 原生支持 ES6，我有一堆 ES6 代码通过 Babel 转换为 ES5，我需要完成的是对 ES6 代码而不是 ES5 的代码覆盖率的准确测量。这是客户的要求，所以我不能告诉他停止要求这样的事情......

Afaik NodeJS 已经原生支持 ES6，有没有办法用 PhantomJS 做到这一点？

Answer 1

我最终使用了原始 NodeJS（没有 PhantomJs）+ Express + 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();
        }
    });
});

这种方法的美妙之处在于不需要使用 babel 转译代码，它允许 Angular 等前端包从 bower 加载，而所有配置内容都来自 npm...

编辑

我偶然发现 NodeJS 还不支持所有 ES6 特性，而且像 ES6 模块这样的特性真的很痛苦，它们在任何地方都不受支持，所以我最终做了部分翻译使用 babel 编写代码，期望随着 NodeJS 开始为 ES6 提供越来越丰富的支持，我最终将逐步关闭 babel 功能，并在可用时切换到原生支持...