[英]How do I automatically run an NPM script after webpack dev server has been started?
I'm doing a Vue project that runs on Electron.我正在做一个在 Electron 上运行的 Vue 项目。 Since Vue uses webpack dev server to run the Vue app in development mode, I need to launch Electron with the dev server URL right after compilation completes and dev server has been started.
由于 Vue 使用 webpack 开发服务器在开发模式下运行 Vue 应用程序,我需要在编译完成后立即启动 Electron 和开发服务器 URL。开发服务器已启动。 Right after this.
就在这之后。
I know I can manually run Electron after this but I need this task to be automated.我知道我可以在此之后手动运行 Electron 但我需要自动执行此任务。 My only purpose for this is to get Vue devtools running on Electron.
我这样做的唯一目的是让 Vue 开发工具在 Electron 上运行。 Vue devtools won't work even if I set
writeToDisk: true
and open up the index.html
on Electron.即使我设置
writeToDisk: true
并打开index.html
上的 index.html,Vue devtools 也不会工作。 It only seems to work over the dev server ( Issue seems to be file://
protocol ).它似乎只适用于开发服务器(问题似乎是
file://
协议)。 I found out that It's possible to open a browser after the server has started.我发现服务器启动后可以 打开浏览器。 But can't run any custom scripts.
但无法运行任何自定义脚本。
So what I want is to automatically run cross-env NODE_ENV=development electron dist/main.js
after I run serve
Vue task and the dev server has been started.所以我想要的是在我运行
serve
Vue 任务并且开发服务器已经启动之后自动运行cross-env NODE_ENV=development electron dist/main.js
。 (I also know that this feature is already implemented in vue-cli-plugin-electron-builder but I'm avoiding all these plugins for multiple reasons) (我也知道这个功能已经在vue-cli-plugin-electron-builder中实现了,但是出于多种原因我避免使用所有这些插件)
You can prepend pre
and post
to npm scripts, and npm will figure out what you want.您可以在 npm 脚本
pre
添加和post
,npm 会找出您想要的。 Because serve
probably runs in the foreground, a postserve
would normally not work, but you can get around that by using &
.因为
serve
可能在前台运行,所以postserve
通常不会工作,但你可以通过使用&
来解决这个问题。 This won't wait for any build steps to complete, but if it's a requirement to have it wait, you could throw a short sleep
in as well.这不会等待任何构建步骤完成,但如果需要等待,您也可以短暂
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"
This is how I ended up doing it and managed to create a build tool called Vuelectro .这就是我最终完成它并设法创建一个名为Vuelectro的构建工具的方式。
I had to do it programmatically using the @vue/cli-service
module and manually start the serve process where I could run electron once the webpack dev server was started.我必须使用
@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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.