如何在 webpack 开发服务器启动后自动运行 NPM 脚本？

Question

我正在做一个在 Electron 上运行的 Vue 项目。 由于 Vue 使用 webpack 开发服务器在开发模式下运行 Vue 应用程序，我需要在编译完成后立即启动 Electron 和开发服务器 URL。开发服务器已启动。 就在这之后。

我知道我可以在此之后手动运行 Electron 但我需要自动执行此任务。 我这样做的唯一目的是让 Vue 开发工具在 Electron 上运行。 即使我设置writeToDisk: true并打开index.html上的 index.html，Vue devtools 也不会工作。 它似乎只适用于开发服务器（问题似乎是file://协议）。 我发现服务器启动后可以 打开浏览器。 但无法运行任何自定义脚本。

所以我想要的是在我运行serve Vue 任务并且开发服务器已经启动之后自动运行cross-env NODE_ENV=development electron dist/main.js 。 （我也知道这个功能已经在vue-cli-plugin-electron-builder中实现了，但是出于多种原因我避免使用所有这些插件）

Answer 1

您可以在 npm 脚本pre添加和post ，npm 会找出您想要的。 因为serve可能在前台运行，所以postserve通常不会工作，但你可以通过使用&来解决这个问题。 这不会等待任何构建步骤完成，但如果需要等待，您也可以短暂sleep 。

"serve": "my serve command &",
"postserve": "cross-env NODE_ENV=development electron dist/main.js"

// or with a sleep
"postserve": "sleep 5 && cross-env NODE_ENV=development electron dist/main.js"

Answer 2

这就是我最终完成它并设法创建一个名为Vuelectro的构建工具的方式。

我必须使用@vue/cli-service模块以编程方式执行此操作，并手动启动服务进程，一旦 webpack 开发服务器启动，我就可以在其中运行 electron。

const vueService = require('@vue/cli-service');
const service = new vueService(process.cwd());

function serveDev() {
    service.init("development");
    service.run('serve').then(({server, url}) => {
        let electron = spawn(path.join(process.cwd(), 'node_modules', '.bin', process.platform === 'win32' ? 'electron.cmd' : 'electron'), ['app/electron-main.js'], {stdio: 'inherit'});

        electron.on('exit', function (code) {
            process.exit(0);
        });
    }).catch((err) => {
        console.error(err.stack);
    });
}

完整的源代码可以在 这里找到。