摘要：在我看來，對于廣大前端開發者來說，最為耳熟能詳的應該是和。的很好處理，和前端開發類似，和都有類似的工具，直接將前端開發中使用的配置挪過來就好。至此，只需要在終端中執行就能達到開發過程中自動和的目的了。

源自 Atom-shell 的 Electron 目前是一個很火的項目。已經有很多開發者基于 Electron 開發出了各種各樣的桌面程序。在我看來，對于廣大前端開發者來說，最為耳熟能詳的應該是 Atom 和 VS Code。在 Electron 的官網上能夠看到更多有意思的項目。

之前提到過，我的計劃之一就是玩一下 Electron，打造一個桌面工具。上個星期經過幾次摸索和調研確定了這個項目的可行性之后，開始著手打造。近幾天慢慢的構建出基礎的項目前端結構。

對于前端的技術選型已經沒有之前那么糾結了，思考過后決定了：React。原因很簡單，之前的一個小項目用的是 Vuejs 的一套體系，這次想換換口味。雖然之前我一直很不喜歡 React 那種模板和邏輯混合在一起的方式，但是很喜歡 Redux 的處理方式，所以忍不住試試看，到底是用 React 爽還是 Vue 爽。

了解過 Electron 的應該都知道它的 main process 和 renderer process。main process 使用 BroswerWindow 實例創建 web page，每個 BroswerWindow 實例在它自己的 renderer process 中運行 web page，每當 BroswerWindow 實例被銷毀時，其對應的 renderer process 也會被終止。main process 管理所有的 web page 及其對應的 renderer process 。

我覺得可以這么簡單地理解的：如果將 renderer process 負責管理渲染的 web 頁面所做的事情和瀏覽器類似，那么 main process 則是包裹著這個“瀏覽器”的外殼，將“瀏覽器”中的代碼與系統底層聯系在一起。

在實踐過程中，我發現 main process 的文件不能使用 import（應該說是無法使用 ES6 語法），可以使用 babel 將使用 ES6 語法的代碼編譯成可執行的版本代碼。而 renderer process 的代碼則通過 webpack 打包 React 代碼。

通過 gulp 和 babel 可以很輕松地完成

var path = require("path");
var gulp = require("gulp");
var babel = require("gulp-babel");

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");

// main process 的編譯
gulp.task("babel:electron-main", function () {
  return gulp.src([APP_PATH + "/main.js", APP_PATH + "/main/**/*.js"], { base: APP_PATH })
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

gulp 與 babel 的配合使用的更多細節可以參考 babel 和 gulp-babel。

React 的 webpack 配置在這里我就不重復了，到處都能找到。

我發現在目前市面上Electron 的相關基礎教程中，簡單的介紹都是如此：

// 安裝 
npm install -g electron-prebuilt
// 啟動
electron .

//更好一點的是按照官方給出的 quick start
npm start

但是這樣有一個很直接的問題：每次修改 main process 相關代碼之后需要重啟，修改了 renderer process 相關代碼之后需要手動刷新，這很影響開發體驗。

renderer process 的 hot load 很好處理，和前端開發類似，react 和 vue 都有類似的工具，直接將前端開發中使用的配置挪過來就好。而 main process 的自動化則需要另尋辦法，當然，也不難。使用 electron-connect 可以很好的幫助我們解決這個問題，在 gulp 中設置好task 之后然后在 renderer process 和 main process 中的插入一段代碼即可。

gulpfile.js

var gulp = require("gulp");
var gutil = require("gulp-util");
var electron = require("electron-connect").server.create();

gulp.task("watch:electron", function () {
  electron.start();
  gulp.watch(["./app/src/main.js", "./app/src/main/**/*.js"], electron.restart);
  gulp.watch(["./app/dist/**/*.{html,js,css}"], electron.reload);
});

RendererProcess

    
    





Chromium ,
and Electron .
and Node .

MainProcess

"use strict";

var app = require("app");
var BrowserWindow = require("browser-window");
var client = require("electron-connect").client;

app.on("ready", function () {
  var mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Connect to server process
  client.create(mainWindow);
});

細心的同學可能會發現，在 watch 的 task 中，同時對 main process 和 renderer process 的代碼監聽，對應的操作是 restart 和 reload。reload 會刷新當前的頁面，在這里 React 的 hot load 都可以不需要了。印象中好像 hot load 是不會整個刷新頁面的，回頭可以試試。

至此，只需要在終端中執行

gulp watch:electron 

就能達到開發過程中 electron 自動 restart 和 reload 的目的了。如果想看詳細文檔可以前往 這里。

上述只是簡單的例子，更多時候需要根據項目的規劃做調整，一下是我的 gulpfile.js

var path = require("path");
var gulp = require("gulp");
var babel = require("gulp-babel");
var gutil = require("gulp-util");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var electron = require("electron-connect").server.create();

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");

// 開發
var webpackConfigDev = Object.create(webpackConfig);
webpackConfigDev.devtool = "eval-source-map";
webpackConfigDev.debug = true;

var devCompiler = webpack(webpackConfigDev);

// renderer process 的 webpack 編譯
gulp.task("webpack:build-dev", function () {
  devCompiler.run(function (err, status) {
    if (err) {
      throw new gutil.PluginError("webpack:build-dev", err);
    }
    gutil.log("[webpack:build-dev]", status.toString({
      colors: true
    }));
  });
});

// main process 的編譯
gulp.task("babel:electron-main", function () {
  return gulp.src([APP_PATH + "/main.js", APP_PATH + "/main/**/*.js", APP_PATH + "/constant/*.js"], { base: APP_PATH })
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});


gulp.task("watch", ["babel:electron-main", "webpack:build-dev"], function () {

  electron.start();

  gulp.watch(["./app/main.js", "./app/main/**/*.js"], ["babel:electron-main"]);
  gulp.watch([APP_PATH + "/constant/*.js", "./app/src/**/*.{html,js,css}"], ["webpack:build-dev"]);

  gulp.watch(["./dist/main.js", "./dist/main/**/*.js"], electron.restart);
  gulp.watch(["./dist/renderer/*.{html,js,css}", "./dist/renderer/**/*.{html,js,css}"], electron.reload);

});

gulp.task("dev", ["watch"]);