How to Pack a Electron app
source link: https://blog.triplez.cn/posts/pack-electron-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Use electron-packager to create your distribution app packages.
Download the electron-packager#
$ npm install electron-packager -g
$ npm install electron-packager --save-dev
Speed up NPM install in China#
$ npm install your_package --registry=https://registry.npm.taobao.org
Basic usage#
$ electron-package ./ --all
Speed up package in China#
For the reason that everyone knows, the net speed to AWS is so slow that we cannot wait for it. So we some other options to speed up our progress.
Fortunately, Taobao
has a mirror website for electron
, we can use this mirror resource to download the package what we need.
$ export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
Minimize the package#
Due to the node modules, the package will be so big that you can not easily to distribute them to potential users, so we need to decrease the package size.
Ignore directories#
node_modules#
Usually, the project has a lot of node dependencies, so the node_module
directory should be the largest directory in out normal project. So we definitely should ignore it.
.git#
Git repository directory, ignore it too.
.vscode#
Visual Studio Code workspace configuration files, we do not need them to build the application we wanted.
Other unnecessary directories and files#
Such as .gitignore
, README.md
, LICENSE.md
Electron#
You MUST add electron
to devDependencies
before packing your application, or it will stretch the application package larger than you think…
Hide your source code#
Use the --asar
option to hide your source code and resources.
Electron/ASAR README:
*“Asar is a simple extensive archive format, it works like
tar
that concatenates all files together without compression, while having random access support."
Conclusion#
In order to include all the options above, we may splice the following command:
electron-packager . --platform=linux,win32,darwin --arch=ia32,x64 --out=pack/ --overwrite --ignore=\"(.git|.vscode|node_modules|src|.gitignore|README.md|LICENSE.md)\" --asar
Common problems#
Cannot load node-notifier#
If you include the npm module node-notifier
in your Electron
application and use the --asar
option while packaging, you may find this error after you try to run your packed app.
“If packaging your Electron app as an
asar
, you will find node-notifier will fail to load. Due to the way asar works, you cannot execute a binary from within an asar. As a simple solution, when packaging the app into an asar please make sure you--unpack
the vendor folder of node-notifier, so the module still has access to the notification binaries. To do this, you can do so by using the following command:"asar pack . app.asar --unpack "./node_modules/node-notifier/vendor/**"*
So we need to add --asar-unpack-dir=node_modules/node-notifier/vendor/
behind our command.
electron-packager . --platform=linux,win32,darwin --arch=ia32,x64 --out=pack/ --overwrite --ignore=\"(.git|.vscode|node_modules|src|.gitignore|README.md|LICENSE.md)\" --asar --asar-unpack-dir=node_modules/node-notifier/vendor/
CNPM#
If you use cnpm
to install your dependency packages, it may cause error and the pack is much larger after using electron-packager
to pack your code to distribution files.
I highly recommend that DO NOT USE CNPM
.
To speed up NPM
in China, use --registry=https://registry.npm.taobao.org
instead.
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK