如何在 webpack dev server 启动后自动运行 NPM 脚本？答案

【问题标题】：How do I automatically run an NPM script after webpack dev server has been started?如何在 webpack dev server 启动后自动运行 NPM 脚本？
【发布时间】：2021-04-21 01:26:26
【问题描述】：

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

我知道我可以在此之后手动运行 Electron，但我需要自动执行此任务。我这样做的唯一目的是让 Vue devtools 在 Electron 上运行。即使我在 Electron 上设置 writeToDisk: true 并打开 index.html，Vue devtools 也无法工作。它似乎只适用于开发服务器 (Issue seems to be file:// protocol)。我发现服务器启动后可以open a browser。但无法运行任何自定义脚本。

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

【问题讨论】：

尝试运行npm run serve && cross-env NODE_ENV=development electron dist/main.js，如果可行，您可以将其添加到您的 package.json 文件中的 scripts 键中，例如："scripts" : { "serve-and-electron": "vue- cli-service serve && cross-env NODE_ENV=development electron dist/main.js" } 在你的终端运行 npm run serve-and-electron 注意：如果你的 serve 命令不包含值“vue-cli-service serve”，替换它具有与服务键中相同的值。
@AndresForonda 感谢您的建议，但由于serve 任务在服务器停止之前不会结束。
嘿，只用一个 & 代替，试试吧，或者像 npm run serve & cross-env NODE_ENV=development electron dist/main.js 这样的东西，我尝试使用 vite 和 npm run dev & npm run build 并且它有效。
这将同时运行，最终导致 Electron 大部分时间都无法加载 URL。 ??????
试试npm run serve & sleep 10 && cross-env NODE_ENV=development electron dist/main.js。这将在启动 Electron 之前等待 10 秒，这应该会给开发服务器足够的时间来启动。

标签： javascript node.js vue.js webpack electron

【解决方案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"

【讨论】：

这就是为什么我不能发布脚本的确切问题。我想睡眠是一种解决方法，但距离解决方案还很远。谢谢你的建议。我不敢相信 webpack 没有这么简单的功能。

【解决方案2】：

这就是我最终做到这一点的方式，并设法创建了一个名为 Vuelectro 的构建工具。

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

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);
    });
}

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

【讨论】：