Angular鍜孍lectron杩欐牱缁撳悎锛屽紑鍙戞晥鐜囩洿鎺ユ媺婊?馃お

Posted 2021-09-06 闈掓湪

鍏徃浣跨敤Angular+Electron杩涜PC绔簲鐢ㄥ紑鍙戯紝浣跨敤寮€婧愰」鐩?code>angular-electron浣滀负妯℃澘锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fgithub.com%2Fmaximegris%2Fangular-electron" rel="nofollow">https://github.com/maximegris... 锛夛紝浣嗛殢鐫€椤圭洰鐨勮繘琛岋紝琚涓嬬殑鍑犱釜鐥涚偣鎶樼（寰椾笉琛岋細

• [ ] 浣跨敤tsc缂栬瘧涓昏繘绋嬬殑浠ｇ爜锛屾棤娉曡涓昏繘绋嬬殑浠ｇ爜鐑洿鏂帮紙闇€瑕侀噸鍚紝闈炲父楹荤儲+鑰楁椂锛?/li>
• [ ] 涓昏繘绋嬪拰娓叉煋杩涚▼鐨勫惎鍔ㄦ病鏈夌粨鍚堝ソ锛屼互鑷充簬鍦ㄥ叧闂簲鐢ㄧ殑鏃跺€欙紝娓叉煋杩涚▼闇€瑕佸彟澶栧幓鏉€姝伙紙涓嶆柟渚匡級
• [ ] 娓叉煋杩涚▼娌℃湁娣诲姞HMR锛屾瘡娆′唬鐮佸彉鏇达紝瀵艰嚧鏁翠釜椤圭洰Reload锛堥潪甯歌€楁椂锛?/li>

Attention: 鏈枃瀵圭収婧愮爜椋熺敤鏇翠匠 : https://github.com/simo-an/ng... 馃榿

鎺ヤ笅鏉ユ垜浠?del>鍦ㄤ笂鐝懜楸兼椂闂?/del>鍐欎竴涓墦鍖呰剼鏈潵瑙ｅ喅涓婅堪鐨勯棶棰?/p>

---

鍚姩娓叉煋杩涚▼锛屼娇鐢?code>angular-cli鐨勫懡浠?/h4>

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...

馃檮 閭ｆ垜浠€庢牱鍋氬埌涓昏繘绋嬬殑鐑洿鏂板憿锛?/p>

• 鍚姩涓昏繘绋嬶紝骞惰褰曞叾杩涚▼淇℃伅
• 褰?code>Webpack妫€鏌ュ埌鏈変唬鐮佹洿鏂版椂锛屾牴鎹繘绋?code>ID鏉€姝诲師杩涚▼
• 閲嶆柊鍚姩涓昏繘绋嬶紝鏇存柊璁板綍鐨勮繘绋嬩俊鎭?/li>

杩欐牱鏄笉鏄氨寰堝畬缇庯紙鎬濊矾鏉ヨ嚜electron-vue馃槢锛?/p>

缂栬瘧鎵撳寘涓昏繘绋嬬殑浠ｇ爜濡備笅

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

鍚姩搴旂敤鐨勪唬鐮佸涓?code>startElectron()锛屾敞鎰忦煣愪笅闈㈡垜浠紑濮嬪惎鍔?code>Electron鍟?/p>

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鍏ㄩ儴鏉€姝伙紝瑙ｅ喅浜嗕富杩涚▼鍏抽棴锛屾覆鏌撹繘绋嬭繕鍦ㄨ繍琛岀殑闂銆?/p>

鏈€鍚庯紝鍚姩锛岃繍琛?/h4>

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

鎾掕姳锛屽畬缁擄紝鎴戜滑涓婇潰鐨勪袱涓棝鐐硅В鍐冲暒 馃槅

• [x] 浣跨敤webpack鎵撳寘缂栬瘧涓昏繘绋嬩唬鐮佸苟娣诲姞鐑惎鍔紙鏃犻渶閲嶅惎锛岀畝鍗?鐪佹椂锛?/li>
• [x] 涓汇€佹覆鏌撹繘绋嬬浉浜掗厤缃紝鍚岀敓鍚屾锛堟柟渚匡級

---

鐒惰€屾渶鍚庝竴涓棶棰樺湪Webpack11 + 鍙樺緱闈炲父瀹规槗瑙ｅ喅鍟︼紝鍙渶瑕佸湪angular.json涓厤缃ā鍧楃儹鏇存柊鍗冲彲 馃

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

鑷虫锛屾垜浠」鐩腑鐨勪笁涓棝鐐瑰叏閮ㄨВ鍐?/p>

• [x] 浣跨敤webpack鎵撳寘缂栬瘧涓昏繘绋嬩唬鐮佸苟娣诲姞鐑惎鍔紙鏃犻渶閲嶅惎锛岀畝鍗?鐪佹椂锛?/li>
• [x] 涓汇€佹覆鏌撹繘绋嬬浉浜掗厤缃紝鍚岀敓鍚屾锛堟柟渚匡級
• [x] 娓叉煋杩涚▼娣诲姞HMR锛屾瘡娆′唬鐮佸彉鏇达紝鍙噸鏂版覆鏌撶浉搴旀ā鍧楋紙鐪佹椂锛?/li>

---

馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構灏忛粍浜哄垎鍓茬嚎馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構馃構

---

鐪嬪埌杩欓噷浣犱細涓嶄細鏈夌枒闂煒?/p>

• 浣犵敤 ts 鍐欑殑浠ｇ爜锛屾€庝箞鍙互褰撲綔鑴氭湰鐢╪ode杩愯鍛紵
• 閭ｆ垜瑕佹€庢牱浣跨敤electron-builder鎵撳寘鍛?
• 浣犺繖涓湡鐨勬瘮鑰佸鍐欑殑閭ｄ釜寮€婧愮殑鏈?code>4k+ star 鐨勬洿濂界敤鍚?
• ......

閭?code>clone涓嬫潵鐪嬬湅浠ｇ爜锛屽湪鐢佃剳涓婅窇涓€涓嬶紝涓婇潰鐨勭枒鎯戝氨鍏ㄨВ鍟?/p>

娆㈣繋璁块棶锛宻tar or fork锛?https://github.com/simo-an/ng...

以上是关于Angular鍜孍lectron杩欐牱缁撳悎锛屽紑鍙戞晥鐜囩洿鎺ユ媺婊?馃お的主要内容，如果未能解决你的问题，请参考以下文章

鍓嶇涔嬭矾锛氱敤 Angular 瑙勮寖鏉ョ害鏉熷洟闃?git 鎻愪氦

'鍘夊浜嗘垜鐨勫洴锛屽張涓€濂芥秷鎭?#39;.html(false)

鑱婅亰 Raft 绠楁硶

arcgis for js鍒涘缓闅忓湴鍥剧缉鏀剧殑鐐?/a>