electron packaging (four)

After all the work is completed (react page development is complete, the page has been built), we need to package our project.

---

Configuration before packaging

First of all, we must know that when we are developing, the main process loads the local url of the react front-end page, which needs to be replaced with the local file address after react packaging.

Note: There may be various problems after react packaging. Here I encountered a problem. That is, the page is displayed normally during development. After packaging it into a static file, click on the blank. At first, I thought that the homepage was not set. After checking, I found that it was not the problem here. Later, after many investigations, it was found BrowserRouterthat the corresponding address must be the server, which exists, so the local file must not be displayed normally. After the replacement, the HashRouterproblem was successfully solved

In this way, you can test whether the electron can be loaded normally after replacing it with a static page. Normally, it is a problem of the path.

Ready to pack

First need to installasar

$ npm install -g asar

Use asar packpackaging

$ asar pack your-app app.asarThe purpose of this is to reduce the size of the packaged file. For the principle, you can refer to the official document. Use asar packPackage

Then you need to use one of electron-packager,, electron-forgeand electron-builder, here I am using it , and I electron-packagerwill introduce how I use it below.

1. Global installation

   npm install electron-packager -g
   

2. Write packaging commands

   

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

See electron-packager for specific parameters

3. Execute packaging commands

   npm run packageor yarn package

4. Reduce packet size

   After packaging in this way, the file size is about 500M, but in fact, many dependencies are not used by us, so we can keep the ones that are used and delete the ones that are not.

   

   Many dependencies here are used when developing the react front-end page. The front-end page has been packaged, so the ones that should be deleted must be deleted. (I suggest commit a copy to github or keep a copy locally, so that no dependencies can be found when developing the react front-end page later)

   

   I only left these two here. According to the situation, just leave the dependencies used in the main process main.js.

   ---

   Pack it again at this time, the volume will be reduced to 100-200M, and it is very convenient to distribute.