上一篇文件简单介绍了下Moka Desktop, 那么对于我这位Web前端开发工程师是怎么能够开发一个Pc App的呢？
这就不得不说到 electron.

Electron 将chrome内核与nodejs融合在一起，分为Main Process 和 Renderer Process, Main Process主要负责app通用的全局设置，如窗口大小等等，Renderer Process则主要在Chrome中，在两个Process中可以使用所有的node packages

所用第三方

  1. react
  2. babel: 由于react使用的是es6语法，所以需要babel翻译
  3. ace.js: 编辑器
  4. marked.js
  5. moka-cli
  6. 未使用webpack，因为在react中会包含文件系统操作，webpack只是充当打包的角色，fs是不能打包成功的

坑点

  1. iframe与webview
    由于编辑器是我之前用原生js完成的，所以便想用iframe直接引入。 但如果直接使用iframe，electron可不认，在iframe不能使用node api与electron api，但是可以在父窗口利用contentWindow传入引用，然后在iframe中就可以用api了。 其实在官方文档中，是可以直接用webview标签解决上诉问题

  2. mac中使用spawn与fork运行moka-cli 在官方api child_process中
    child_process.spawn(command[, args][, options]) 传入参数是command，也就是shell中的指令 需要依赖于PATH中的moka child_process.fork(modulePath[, args][, options])传入参数是modulePath，也就是javascript文件路径
    注意： modulePath不需要exports，因为fork只是找到文件，开个进程跑一遍该文件 所以我在npm i --save moka-cli后, 直接在文件中写下面代码即可

var moka = require('moka-cli/bin') // bin/index.js中放的便是命令行入口

同时需要传入options

{
    cwd: cwd, // 设置的工作目录(current work directory)
    stdio: [
      0, // (stdin) Use parents stdin for child
      'pipe', // (stdout) Pipe child's stdout to parent
      'pipe', // (stderr) Pipe child's stderr to parent
      'ipc' // fork 需要`ipc`进行进程通信
    ]
}

传入以上options后才能在fork返回的ChildProcess对象中使用stdout/stderr
关于具体的进程通信与管道与信号机制，请看Linux C 一站式教程中的相关章节。

  1. 打包过程
    可以使用electron-packager或者electron-builder进行打包 安装electron时，可以设置export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 使用国内代理加快下载速度。 我在使用packager时，只能打包成unpacked，builder可以打包成packed,也就是安装器，但是builder产生的安装器的图标不对。所以最后还是使用的packager