关于前端:Angular和Electron这样结合开发效率直接拉满-🤪

公司应用Angular+Electron进行PC端利用开发，应用开源我的项目angular-electron作为模板（https://github.com/maximegris/angular-electron ），但随着我的项目的进行，被如下的几个痛点折磨得不行：

• [ ] 应用tsc编译主过程的代码，无奈让主过程的代码热更新（须要重启，十分麻烦+耗时）
• [ ] 主过程和渲染过程的启动没有联合好，以至于在敞开利用的时候，渲染过程须要另外去杀死（不不便）
• [ ] 渲染过程没有增加HMR，每次代码变更，导致整个我的项目Reload（十分耗时）

Attention: 本文对照源码食用更佳 : https://github.com/simo-an/ng-electron 😁

接下来咱们在下班摸鱼工夫写一个打包脚本来解决上述的问题

启动渲染过程，应用angular-cli的命令

import NgCli from "@angular/cli";
import * as WaitOn from "wait-on";

function startRenderer(): Promise<void> {
  NgCli({ cliArgs: ['serve', '--configuration', 'development'] });

  return WaitOn({ resources: ['tcp:4200'] }); // 监听默认 4200 端口
}

编译主过程，咱们应用Webpack对其打包

Webpack的配置代码具体见 https://github.com/simo-an/ng-electron/blob/master/scripts/app-runner/webpack.main.config.ts

🙄 那咱们怎么做到主过程的热更新呢？

• 启动主过程，并记录其过程信息
• 当Webpack查看到有代码更新时，依据过程ID杀死原过程
• 重新启动主过程，更新记录的过程信息

这样是不是就很完满（思路来自electron-vue😛）

编译打包主过程的代码如下

import * as webpack from 'webpack';
import mainConfig from './webpack.main.config'; // 获取 Webpack 配置文件

let electronProcess = null;  // 记住的主过程信息
let manualRestart = false; // 记录主过程被杀死是不是手动杀死的（即是不是热启动）

function startMain(): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    const compiler = webpack.webpack(mainConfig);

    compiler.watch({}, (err, stats) => {
      if (err) { return ; } // 出错
      if (!electronProcess || electronProcess.kill) return resolve();  // 过程曾经杀死

      // 手动重启，对于下面的三个步骤  
      manualRestart = true;
      process.kill(electronProcess.pid);
      electronProcess = null;
      startElectron();    // 启动 Electron

      setTimeout(() => manualRestart = false, 5000);
    });
  });
}

启动利用的代码如下startElectron()，留神🧐上面咱们开始启动Electron啦

let electronProcess = null;  // 记住的主过程信息
let manualRestart = false; // 记录主过程被杀死是不是手动杀死的（即是不是热启动）

function startElectron(): void {
  const args = [
    '--inspect=5858',
    path.join(__dirname, '../../dist/electron-main/main.js') // 主过程入口文件
  ];

  // 记住主过程（下次有代码更新时就杀死）
  electronProcess = spawn(require('electron'), args); 

  electronProcess.on('close', () => {  if (!manualRestart) process.exit(); });
}

这部分的代码里，我如果被动退出利用，会将整个Process全副杀死，解决了主过程敞开，渲染过程还在运行的问题。

最初，启动，运行

Promise.all([ startRenderer(), startMain() ]).then(startElectron)

撒花，完结，咱们下面的两个痛点解决啦 😆

• [x] 应用webpack打包编译主过程代码并增加热启动（无需重启，简略+省时）
• [x] 主、渲染过程互相配置，同生同死（不便）

然而最初一个问题在Webpack11 + 变得非常容易解决啦，只须要在angular.json中配置模块热更新即可 🤒

{
// ...
    "serve": {
        "development": {
          "hmr": true,
          "browserTarget": "ng-electron:build:development"
        }
      }
      // ...
    }
// ...
}

至此，咱们我的项目中的三个痛点全副解决

• [x] 应用webpack打包编译主过程代码并增加热启动（无需重启，简略+省时）
• [x] 主、渲染过程互相配置，同生同死（不便）
• [x] 渲染过程增加HMR，每次代码变更，只从新渲染相应模块（省时）

😋😋😋😋😋😋😋😋😋😋😋😋😋小黄人分割线😋😋😋😋😋😋😋😋😋😋😋😋😋

看到这里你会不会有疑难😐

• 你用 ts 写的代码，怎么能够当作脚本用node运行呢？
• 那我要怎么应用electron-builder打包呢?
• 你这个真的比老外写的那个开源的有4k+ star 的更好用吗?
• ……

那clone下来看看代码，在电脑上跑一下，下面的纳闷就全解啦

欢送拜访，star or fork： https://github.com/simo-an/ng-electron