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 BrowserRouter
that the corresponding address must be the server, which exists, so the local file must not be displayed normally. After the replacement, the HashRouter
problem 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 pack
packaging
$ asar pack your-app app.asar
The purpose of this is to reduce the size of the packaged file. For the principle, you can refer to the official document. Use asar pack
Package
Then you need to use one of electron-packager
,, electron-forge
and electron-builder
, here I am using it , and I electron-packager
will introduce how I use it below.
-
Global installation
npm install electron-packager -g
-
Write packaging commands
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
See electron-packager for specific parameters
-
Execute packaging commands
npm run package
oryarn package
-
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.