如何让量角器等待 webpack-dev-server 启动？

Question

对于非 Angular 项目，我正在尝试复制 Angular CLI 在您使用 ng e2e 时所做的事情——不仅运行 Protractor，而且首先启动开发服务器，并在 Protractor 运行时干净地关闭它完成。

我有一些工作，但我检查 webpack-dev-server 是否成功启动的方式 - 寻找特定消息“webpack：编译成功”。通过stdout —— 看起来像一个丑陋的黑客。而且我将stdout 和stderr 传递给带有pipe 的节点进程的方式也没有产生我期望的所有输出。

这是我目前的protractor.conf.js（还有一堆调试控制台语句，我稍后会清理）：

const { SpecReporter } = require('jasmine-spec-reporter');
const spawn = require('child_process').spawn;
let webpackServerProcess;

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  beforeLaunch() {
    return new Promise((resolve, reject) => {
      let resolved = false;
      let rejected = false;

      webpackServerProcess = spawn('webpack-dev-server', ['--port=4200']);
      webpackServerProcess.stdout.pipe(process.stdout);
      webpackServerProcess.stderr.pipe(process.stderr);

      webpackServerProcess.stdout.addListener('data', chunk => {
        const msg = chunk.toString();

        if (msg.indexOf('webpack: Compiled successfully.') >= 0) {
          resolved = true;
          resolve();
        }
        else if (!resolved && msg.indexOf('webpack:') >= 0) {
          rejected = true;
          reject(msg);
        }
      });

      function done() {
        if (!resolved && !rejected)
          reject('webpack-dev-server terminated unexpectedly');
      }

      webpackServerProcess.addListener('close', (code, signal) => {
        console.log('*** close: ' + code + ', ' + signal);
        done();
      });

      webpackServerProcess.addListener('exit', (code, signal) => {
        console.log('*** exit: ' + code + ', ' + signal);
        done();
      });

      webpackServerProcess.addListener('disconnect', () => {
        console.log('*** disconnect');
        done();
      });

      webpackServerProcess.addListener('message', msg => console.log('*** message: ' + msg));

      webpackServerProcess.addListener('error', error => console.log('*** error: ' + error));
    });
  },
  onPrepare() {
    console.log('onPrepare()');

    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
  onCleanUp() {
    console.log('onCleanUp()');

    if (webpackServerProcess && !webpackServerProcess.killed) {
      try {
        process.kill(webpackServerProcess.pid);
      }
      catch (error) {}
    }
  }
};

任何改进建议将不胜感激。我发现了一些与此主题相关的其他线程，但没有得出明确的结论。

Answer 1

还没有收到任何其他回复，我想我会发布我之前代码的清理版本，具有更好的stderr 输出处理和其他改进，作为我迄今为止最好的答案：

const { SpecReporter } = require('jasmine-spec-reporter');
const spawn = require('child_process').spawn;
let webpackServerProcess;
let stderrBuffer = '';

function sendToStderr(s) {
  // Undo console overstriking so that %-progress output appears on separate lines.
  s = s.replace(/ \x08\x08/g, '\x08');
  s = s.replace(/\x08+/g, '\n');
  stderrBuffer += s;

  let eol = stderrBuffer.lastIndexOf('\n');

  if (eol >= 0) {
    process.stderr.write(stderrBuffer.substring(0, eol + 1));
    stderrBuffer = stderrBuffer.substring(eol + 1);
  }
}

function flushStderr() {
  if (stderrBuffer) {
    process.stderr.write(stderrBuffer + '\n');
    stderrBuffer = '';
  }
}

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  beforeLaunch() {
    return new Promise((resolve, reject) => {
      let resolved = false;
      let rejected = false;

      webpackServerProcess = spawn('webpack-dev-server', ['--port=4200']);
      webpackServerProcess.stdout.pipe(process.stdout);

      webpackServerProcess.stdout.addListener('data', chunk => {
        const msg = chunk.toString();

        if (msg.indexOf('webpack: Compiled successfully.') >= 0) {
          resolved = true;
          flushStderr();
          resolve();
        }
        else if (!resolved && msg.indexOf('webpack:') >= 0) {
          rejected = true;
          flushStderr();
          reject(msg);
        }
      });

      webpackServerProcess.stderr.addListener('data', chunk => {
        sendToStderr(chunk.toString());
      });

      // This config is meant for small projects. Assume that if a minute goes by with no errors, webpack has finished
      // building and webpack-dev-server is ready to go for e2e.
      setTimeout(() => {
        if (!resolved && !rejected) {
          resolved = true;
          resolve();
        }
      }, 60000);

      function done() {
        if (!resolved && !rejected) {
          flushStderr();
          reject('webpack-dev-server terminated unexpectedly');
        }
      }

      webpackServerProcess.addListener('close', done);
      webpackServerProcess.addListener('exit', done);
      webpackServerProcess.addListener('disconnect', done);
    });
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
  onCleanUp() {
    flushStderr();

    if (webpackServerProcess && !webpackServerProcess.killed) {
      try {
        process.kill(webpackServerProcess.pid);
      }
      catch (error) {}
    }
  }
};