Github Repo address MAXOS Darwin X64 download

I have not been able to find a good OCR tool on MacOS, resulting in a lot of things when reading by hand, slightly annoying. We just used Tesseract some time ago, so we encapsulated one with Electron. Here are a brief description of some pits and key points in the development process, and we will also produce a series of them when we are free in the future

Introduction

It looks something like this:

Tesseract is now installed on this machine:

brew install imagemagick
brew install tesseract --all-languagesCopy the code

Then download and open it directly.

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

The Web part

The author still uses Webpack+React+Redux for the Web part (to be added). The separate code for this part can refer to my Webpack package and the demonstration Boilerplate of Webpack-React-redux-BoilerPlate. Note that there have been major changes to the API and the 0.x series since Electron 1.x, and many projects on Github are not available after the upgrade to 1.2.0.

Support Hot Reload environment construction

Electron is actually a wrapped approximation of a browser, so Hot Reload is not that different from pure Web development in that it starts with a Hot Load Server that listens on port 3000. In Electron, all scripts are loaded from localhost:3000. The main changes are:

var devEntry = [ 'eventsource-polyfill', // Change WHM default load address 'webpack-hot-middleware/client? Path =http://localhost:${port}/__webpack_hmr',] // change the default publicPath prefix config.output.publicPath = 'http://localhost:${port}/dist/' // public directory nameCopy the code

We also need to change the address of the loaded script in dev.html:



    Index For Debug
    



       




Copy the code

Introduce local modules into the renderer process

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

First, in order to avoid Webpack error that electron does not exist, it is recommended to use window.require mode for all modules provided by Node or electron, so that Webpack will ignore the introduction.

Native part

Creating a local window

/** * Created by apple on 16/6/3. */ const electron = require('electron'); Const {app} = electron; Const {BrowserWindow} = electron; // Create a global reference to the Window object, otherwise it may be automatically collected by JavaScript's garbage collection mechanism. /** * @function createWindow() {win = new BrowserWindow({width: 800, height: 600}); Win.loadurl (' file://${__dirname}/dist/app.html '); / / start debugging tools, if you don't need to open is the development environment. / / win webContents. OpenDevTools (); Win. on('closed', // If your application supports multiple Windows, you can store all references in an array, and then dynamically delete the reference from this array. }); } // Call app.on('ready', createWindow) after the base environment is ready; // App. on('window-all-closed', () => {// On OSX it is common for applications and their Menu Bar //  to stay active until the user quits explicitly with Cmd + Q if (process.platform ! == 'darwin') { app.quit(); }}); On ('activate', () => {// Reactivate the app after Menu Bar is clicked on the Dock if (win === null) {createWindow(); }});Copy the code

packaging

Generally speaking, there are three packing methods recommended by Electron. Here, the author uses the convenient tool of electronic-packager. However, a painful problem is that Electron cannot be downloaded all the time, even if SS and proxychains4 are attached. So it’s ultimately packaged programmatically:

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); // check the compile-time environment const arch = "x64"; packager({ dir: "./", platform, arch, out: `release/`, override: true, prune: true, download: { mirror: "Https://npm.taobao.org/mirrors/electron/"}} / / set the Electron download address, function done_callback (err, appPaths) {/ *... * /});Copy the code

Then wrap the script in package.json:

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

Avoid packing node_modules

In Web development we add dependencies like React and Redux to package.json, but Electron Packager packs node_modules into the application as well. The code is then packaged in Webpack and compiled into a uniform JS script, so prune can be set to true first to avoid packing all dev-dependencies. Also, we need to place all non-local modules in dev-dependencies.