摘要：在我看來，對于廣大前端開發(fā)者來說，最為耳熟能詳?shù)膽?yīng)該是和。的很好處理，和前端開發(fā)類似，和都有類似的工具，直接將前端開發(fā)中使用的配置挪過來就好。至此，只需要在終端中執(zhí)行就能達(dá)到開發(fā)過程中自動(dòng)和的目的了。

源自 Atom-shell 的 Electron 目前是一個(gè)很火的項(xiàng)目。已經(jīng)有很多開發(fā)者基于 Electron 開發(fā)出了各種各樣的桌面程序。在我看來，對于廣大前端開發(fā)者來說，最為耳熟能詳?shù)膽?yīng)該是 Atom 和 VS Code。在 Electron 的官網(wǎng)上能夠看到更多有意思的項(xiàng)目。

之前提到過，我的計(jì)劃之一就是玩一下 Electron，打造一個(gè)桌面工具。上個(gè)星期經(jīng)過幾次摸索和調(diào)研確定了這個(gè)項(xiàng)目的可行性之后，開始著手打造。近幾天慢慢的構(gòu)建出基礎(chǔ)的項(xiàng)目前端結(jié)構(gòu)。

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

了解過 Electron 的應(yīng)該都知道它的 main process 和 renderer process。main process 使用 BroswerWindow 實(shí)例創(chuàng)建 web page，每個(gè) BroswerWindow 實(shí)例在它自己的 renderer process 中運(yùn)行 web page，每當(dāng) BroswerWindow 實(shí)例被銷毀時(shí)，其對應(yīng)的 renderer process 也會(huì)被終止。main process 管理所有的 web page 及其對應(yīng)的 renderer process 。

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

在實(shí)踐過程中，我發(fā)現(xiàn) main process 的文件不能使用 import（應(yīng)該說是無法使用 ES6 語法），可以使用 babel 將使用 ES6 語法的代碼編譯成可執(zhí)行的版本代碼。而 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 的配合使用的更多細(xì)節(jié)可以參考 babel 和 gulp-babel。

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

我發(fā)現(xiàn)在目前市面上Electron 的相關(guān)基礎(chǔ)教程中，簡單的介紹都是如此：

// 安裝 
npm install -g electron-prebuilt
// 啟動(dòng)
electron .

//更好一點(diǎn)的是按照官方給出的 quick start
npm start

但是這樣有一個(gè)很直接的問題：每次修改 main process 相關(guān)代碼之后需要重啟，修改了 renderer process 相關(guān)代碼之后需要手動(dòng)刷新，這很影響開發(fā)體驗(yàn)。

renderer process 的 hot load 很好處理，和前端開發(fā)類似，react 和 vue 都有類似的工具，直接將前端開發(fā)中使用的配置挪過來就好。而 main process 的自動(dòng)化則需要另尋辦法，當(dāng)然，也不難。使用 electron-connect 可以很好的幫助我們解決這個(gè)問題，在 gulp 中設(shè)置好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);
});

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，在 watch 的 task 中，同時(shí)對 main process 和 renderer process 的代碼監(jiān)聽，對應(yīng)的操作是 restart 和 reload。reload 會(huì)刷新當(dāng)前的頁面，在這里 React 的 hot load 都可以不需要了。印象中好像 hot load 是不會(huì)整個(gè)刷新頁面的，回頭可以試試。

至此，只需要在終端中執(zhí)行

gulp watch:electron 

就能達(dá)到開發(fā)過程中 electron 自動(dòng) restart 和 reload 的目的了。如果想看詳細(xì)文檔可以前往 這里。

上述只是簡單的例子，更多時(shí)候需要根據(jù)項(xiàng)目的規(guī)劃做調(diào)整，一下是我的 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");

// 開發(fā)
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"]);