Webpack 开发服务器：服务器运行时触发命令的挂钩或机制答案

【问题标题】：Webpack dev server: Hook or mechanism for trigger command once that the server is runningWebpack 开发服务器：服务器运行时触发命令的挂钩或机制
【发布时间】：2017-08-30 03:12:08
【问题描述】：

在我的开发工作流程中，我打开 2 个终端窗口，以便在一个 npm start task 中运行，一旦服务器在第二个窗口运行，我运行 cucumberjs 的功能测试套件，这正如我预期的那样工作。但我的问题是，在我的 CI 环境中，我需要在一个进程中运行它。我一直在尝试这个：

npm start | cucumberjs --require test/functional/ --compiler js:babel-register test/functional/

这个问题是任务 npm start 需要一段时间才能运行，同时黄瓜任务尝试访问 localhost:3000（webpack-dev-server 运行时的 url ) 但服务器尚未准备好，测试失败。

那么，我该如何处理呢？

项目： https://github.com/gpincheiraa/angularjs-tdd-jest/tree/dev

package.json

  ...

  "scripts": {
    "start": "npm run stubs & webpack-dev-server",
    "dev": "npm start -- --open",
    "stubs": "stubby -w -d stubs/fakeserver.yml -s 5000",
    "tdd": "cross-env NODE_PATH=./src jest --watch --verbose",
    "test": "cross-env NODE_PATH=./src jest --coverage --verbose",
    "test:functional": "cucumberjs --require test/functional/ --compiler js:babel-register test/functional/",
    //I want in the test:functional-ci task run the npm start and once that is serving the project, run npm run test:functional task
    "test:functional-ci": "cross-env NODE_ENV=staging npm run test:functional",
    "test-debug": "cross-env NODE_PATH=./src node --inspect --inspect-brk node_modules/.bin/jest -i",
    "build": "webpack",
    "check-coverage": "npm test | http-server -so -p 9000 coverage/lcov-report"
  },

  ...

webpack.config.js

module.exports = {
    entry: [
      'core-js/shim',
      'babel-polyfill',
      'angular',
      './src/index.js'
    ],
    output: {
        path: 'dist',
        filename: 'index.bundle.js'
    },
    module: {
        loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        { test: /\.(html)$/, loader: 'html-loader' },
        { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }]
    },
    cache: true,
    devtool: 'eval-source-map',
    devServer: {
        filename: "index.bundle.js",
        contentBase: "./src",
        port: 3000,
        watch: true,
        publicPath: "/",
        historyApiFallback: true,
        stats: {
            colors: true,
            chunks: false
        }
    }
};

【问题讨论】：

你不能在黄瓜任务中添加一个逻辑来检查服务器是否正在运行（并重复检查5次，每分钟一次）并且只有在服务器确实在运行时才继续?

标签： node.js continuous-integration webpack-dev-server functional-testing cucumberjs

【解决方案1】：

最后，我无法通过一些 webpack 选项直接解决我的问题。在我的 CI 系统上，我运行以下命令：

package.json

"scripts": {
    "start": "sh -c \"npm run stubs & webpack-dev-server\"",
    ...
    "test:functional": "cucumberjs --require test/functional/ --compiler 
    ...

.travis.yml

before_script: npm start & sleep 7
script: npm run test:functional

所以当我运行npm start & sleep 7 时，我给npm start 7 秒的时间让任务完成他们的工作，然后我运行npm run test:functional 脚本。

这是我的仓库：https://github.com/gpincheiraa/angularjs-tdd-jest 这是 CI travis 日志中的结果：https://travis-ci.org/gpincheiraa/angularjs-tdd-jest/jobs/271532237

【讨论】：