Github Repo 地址
文章地址
MAXOS Darwin x64下载

笔者一直在MacOS上没找到太顺心的OCR工具,导致看书的时候很多东西只能手打,略烦。正好前段时间用了Tesseract,就用Electron封装了一个,这里简要记述下开发当中的一些坑和要点,日后有空把Electron整理好也出个系列

Introduction

这东西,大概是这个样子:

现在本机上安装个Tesseract:

brew install imagemagick
brew install tesseract --all-languages

然后直接下载打开即可。

Development

Setup

use npm install or npm link to install dependences
use npm install -g electron-prebuilt to enable the global electron

Develop & Hot-Reloading

use npm start to start webpak hot-middle server
use npm run electron-test to use electron and set env to development

Package

use npm run buildto generate list file for web modules
usenpm run package-osx to build and package into dmg

Web部分

笔者Web部分还是采用Webpack+React+Redux(待加入)，关于这部分的单独代码可以借鉴我的Webpack套装以及Webpack-React-Redux-Boilerplate这个示范Boilerplate。需要注意的是，在Electron 1.x之后API和0.x系列有了较大的变化，很多Github上的项目在升级到1.2.0之后不可用。

支持Hot Reload的环境搭建

Electron实际上是一个封装好的近似浏览器，因此Hot Reload与纯粹的Web开发区别不大，都是先起一个Hot Load Server，监听3000端口。不过需要做修改的是，在Electron中所有的脚本都要从localhost:3000加载，主要修改有：

var devEntry = ['eventsource-polyfill',//修改WHM的默认加载地址`webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
];
//修改默认的公共路径前缀
config.output.publicPath = `http://localhost:${port}/dist/`//公共目录名

在dev.html中也需要修改下加载的脚本的地址：

<html>
<head><title>Index For Debug</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>
<script src="http://localhost:3000/dist/vendors.bundle.js"></script>
<script src="http://localhost:3000/dist/main.bundle.js"></script>

在渲染进程中引入本地模块

const {dialog} = window.require('electron').remote;
const fs = window.require("fs");

首先为了避免Webpack在打包时报错electron不存在，建议是将所有Node或者Electron提供的模块用window.require方式，这样Webpack会忽略引入。

Native部分

创建本地窗口

/*** Created by apple on 16/6/3.*/
const electron = require('electron');
// 用于控制应用生命周期
const {app} = electron;
// 用于创建本地窗口
const {BrowserWindow} = electron;//为Window对象创建一个全局的引用,否则可能被JavaScript的垃圾回收机制自动回收
let win;/*** @function 创建窗口*/
function createWindow() {// 创建类似于浏览器的窗口win = new BrowserWindow({width: 800, height: 600});// 加载应用入口文件,本文件为测试文件,因此加载的是测试win.loadURL(`file://${__dirname}/dist/app.html`);// 启动调试工具,如果是开发环境下则不需要开启// win.webContents.openDevTools();// 设置窗口关闭事件win.on('closed', () => {//因为上面是设置了一个全局引用,因此这里需要对该对象解除引用//如果你的应用支持打开多窗口,可以把所有的引用存入一个数组中,然后在这里动态删除win = null;});
}// 在基本环境准备好之后的回调
app.on('ready', createWindow);// 所有窗口都关闭之后的回调
app.on('window-all-closed', () => {//在OSX中经常是用户虽然关闭了主窗口,但是仍然希望使用Menu Bar,因此这里不进行强行关闭// On OS X it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit();}
});// 应用被重新激活之后的回调
app.on('activate', () => {// 在Dock中的Menu Bar被点击之后重新激活应用if (win === null) {createWindow();}
});

打包

一般来说，Electron推荐的打包方式有三种，这里笔者使用的是electron-packager这个便捷工具，不过碰到一个蛋疼的问题是Electron一直下载不下来，挂了SS加上proxychains4都不行。因此最终还是用编程方式进行打包：

require('babel-polyfill');
const exec = require('child_process').exec;const argv = require('minimist')(process.argv.slice(2));const platform = argv._[0];//编译的目标平台const packager = require('electron-packager');console.log("Current NODE_ENV = " + process.env.NODE_ENV);//判断编译时环境const arch = "x64";packager({dir: "./",platform,arch,out: `release/`,override: true,prune: true,download: {mirror: "https://npm.taobao.org/mirrors/electron/" //设定Electron的下载地址}
}, function done_callback(err, appPaths) { /* … */
});

然后将脚本封装到package.json中：

"package-osx": "npm run clean-electron && NODE_ENV=production node -r babel-register package.js darwin",

避免打包node_modules

在Web开发中我们会将譬如React、Redux等等依赖项加入到package.json的dependencies中，不过Electron Packager会将node_modules也打包到应用中。然后代码都已经通过Webpack打包编译到统一的js脚本中，因此首先可以设置prune为true，这样可以避免打包所有的dev-dependencies。同样，我们也需要将非本地模块全部放到dev-dependencies中。

ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具相关推荐

electron开发_基于Electron+React的跨平台应用程序基础开发框架
介绍 Electron React Boilerplate是Github上超过12k+star的可扩展跨平台应用程序开发框架,Electron 是基于HTML+CSS+Javascript等 Web ...
基于 Electron + React 的超高颜值喜马拉雅客户端 - Mob 诞生记
前言最近一个月沉迷喜马拉雅无法自拔,听相声.段子.每日新闻,还有英语听力,摸鱼学习两不误.上班时候苦于没有桌面端,用网页版有些 bug,官方也不搞一个,只好自己动手了.样式参考了一下 Moon FM ...
Github每日精选（第23期）：macOS下的开源清理工具lemon-cleaner
lemon-cleaner柠檬清理 lemon-cleaner 柠檬清理,开源没几天就获得了3k个点赞,大家对macos 下的清理工具兴趣还是很大的. github下的地址在这里. 腾讯柠檬清理是针对 ...
MacOS下使用C语言基于openssl库进行RSA加密解密
MacOS下使用C语言基于openssl库进行RSA加密解密 1 安装openssl并生成密钥首先当然要安装openssl(这里记得看一下安装路径,应该是/usr/local/Cellar/open ...
基于 Electron 实现 uTools 的超级面板
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言为了进一步提高开发工作效率,最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick[ ...
Beaker：一个基于Electron的点对点Web浏览器
Beaker是一个基于Electron.Chromium和Node.js的实验性.点对点Web浏览器.Beaker包含新的基于Dat的API,用于构建无主机应用程序,同时又保持与传统Web的兼容性. ...
Today：基于 Electron 和 Vue.js 的 GTD 应用
这是我的一个 side project.今天发布了第一个预览版本 v0.0.2,欢迎访问 GitHub 上面的 Repo 获取试用下载(目前仅为 Mac 用户提供 build),并提供你们的宝贵意见和 ...
iso qemu 安装ubuntu_基于libvirt 和QEMU在macOS安装Ubuntu
在流行的虚拟架构体系中,最重要的技术当然要数libvirt和QEMU了.包括Linux虚拟化技术中KVM和xen都使用了QEMU.关于Xen和KVM进行虚拟化,以及在Window下使用Vmware,V ...
macos下使用aria2_macOS下 ansible简单安装及基础使用
macOS下 ansible简单安装及基础使用,其实命令是相通的,我这篇测试基本都是在macOS下执行的.在Linux操作系统下几乎同样的办法. ansible是一种自动化运维工具,基于Python开 ...

ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具