Как скомпилировать electron js в exe
Перейти к содержимому

Как скомпилировать electron js в exe

  • автор:

Получение exe файла из Электрон

Каким образом можно получить исполняемый файл с electron ? То есть, надо собрать html , css и js в один .exe файл, чтобы потом можно было запустить на любом ПК.

Отслеживать
2,783 2 2 золотых знака 14 14 серебряных знаков 57 57 бронзовых знаков
задан 3 янв 2021 в 17:17
Мне без сахара Мне без сахара
696 1 1 золотой знак 4 4 серебряных знака 14 14 бронзовых знаков
3 янв 2021 в 17:32
в моём вчерашнем ответе-приложении есть и сборка ru.stackoverflow.com/a/1227167
5 янв 2021 в 20:48

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • javascript
  • electron
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

How To Compile An Electron Application To A .exe [duplicate]

I’ve been learning how to create applications in Electron and I need help compiling a simple project to a Windows executable. The program is a clone from this Github repo: https://github.com/electron/electron-quick-start. On the repo readme it shows how to run the program:

# Clone this repository git clone https://github.com/electron/electron-quick-start # Go into the repository cd electron-quick-start # Install dependencies npm install # Run the app npm start 

This works fine, but I can’t figure out how to simply compile it. I’ve looked all over google, you would think that something as simple as deploying an application would be well known information.

Упаковка приложений

To distribute your app with Electron, you need to package and rebrand it. To do this, you can either use specialized tooling or manual approaches.

С инструментами​

There are a couple tools out there that exist to package and distribute your Electron app. We recommend using Electron Forge. You can check out its documentation directly, or refer to the Packaging and Distribution part of the Electron tutorial.

Manual packaging​

If you prefer the manual approach, there are 2 ways to distribute your application:

  • С предустановленными бинарными файлами
  • С архивом исходного кода приложения

С предустановленными бинарными файлами​

Для ручного распространения вашего приложения Electron, вам нужно скачать предварительно собранные двоичные файлы Electron. Далее папку, содержащую ваше приложение следует назвать app и поместить в каталог ресурсов Electron, как показано в следующих примерах.

The location of Electron’s prebuilt binaries is indicated with electron/ in the examples below.

electron/Electron.app/Contents/Resources/app/ ├── package.json ├── main.js └── index.html 

Windows and Linux

electron/resources/app ├── package.json ├── main.js └── index.html 

Then execute Electron.app on macOS, electron on Linux, or electron.exe on Windows, and Electron will start as your app. The electron directory will then be your distribution to deliver to users.

With an app source code archive (asar)​

Instead of shipping your app by copying all of its source files, you can package your app into an asar archive to improve the performance of reading files on platforms like Windows, if you are not already using a bundler such as Parcel or Webpack.

Чтобы использовать архив asar для замены каталога app , необходимо переименовать архив в app.asar и положить его в каталог ресурсов Electron, как показано ниже, и Electron будет пытаться прочитать архив и начать с него.

electron/Electron.app/Contents/Resources/ └── app.asar 
electron/resources/ └── app.asar 

Более подробную информацию об использовании asar вы можете найти в репозитории electron/asar .

Ребрендинг скачанных бинарных файлов​

После построения вашего приложения в Electron и перед распространением вам следует провести его ребрендинг.

  • Windows: You can rename electron.exe to any name you like, and edit its icon and other information with tools like rcedit.
  • Linux: You can rename the electron executable to any name you like.
  • macOS: You can rename Electron.app to any name you want, and you also have to rename the CFBundleDisplayName , CFBundleIdentifier and CFBundleName fields in the following files:
    • Electron.app/Contents/Info.plist
    • Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

    Вы также можете переименовать helper приложения, чтобы избежать показа Electron Helper в Activity Monitor, но убедитесь, что вы переименовали имя исполняемого файла helper приложения.

    Структура переименования app будет такая:

    MyApp.app/Contents ├── Info.plist ├── MacOS/ │ └── MyApp └── Frameworks/  └── MyApp Helper.app  ├── Info.plist  └── MacOS/  └── MyApp Helper 

    можно изменить бренд Electron путем изменения имени продукта и сборки его из исходных кодов. Для этого вам надо установить аргумент, отвечающий за имя продукта ( electron_product_name = «YourProductName» ) в файле args.gn и пересобрать Electron.

    Keep in mind this is not recommended as setting up the environment to compile from source is not trivial and takes significant time.

    Electron Packager

    Package your Electron app into OS-specific bundles ( .app , .exe , etc.) via JavaScript or the command line.

    About

    Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution.

    For creating distributables like installers and Linux packages, consider using either Electron Forge (which uses Electron Packager internally), or one of the related Electron tools, which utilizes Electron Packager-created folders as a basis.

    Note that packaged Electron applications can be relatively large. A zipped, minimal Electron application is approximately the same size as the zipped prebuilt binary for a given target platform, target arch, and Electron version (files named electron-v$-$-$.zip ).

    Supported Platforms

    Electron Packager is known to run on the following host platforms:

    • Windows (32/64 bit)
    • macOS (formerly known as OS X)
    • Linux (x86/x86_64)

    It generates executables/bundles for the following target platforms:

    • Windows (also known as win32 , for x86, x86_64, and arm64 architectures)
    • macOS (also known as darwin ) / Mac App Store (also known as mas ) * (for x86_64, arm64, and universal architectures)
    • Linux (for x86, x86_64, armv7l, arm64, and mips64el architectures)

    * Note for macOS / Mac App Store target bundles: the .app bundle can only be signed when building on a host macOS platform.

    Installation

    This module requires Node.js 14.17.5 or higher to run.

    npm install --save-dev electron-packager

    It is not recommended to install electron-packager globally.

    Building Windows apps from non-Windows platforms

    Building an Electron app for the Windows target platform requires editing the Electron.exe file. Currently, Electron Packager uses node-rcedit to accomplish this. A Windows executable is bundled in that Node package and needs to be run in order for this functionality to work, so on non-Windows host platforms (not including WSL), Wine 1.6 or later needs to be installed. On macOS, it is installable via Homebrew.

    Usage

    Via JavaScript

    JavaScript API usage can be found in the API documentation.

    From the command line

    Running Electron Packager from the command line has this basic form:

    npx electron-packager  --platform= --arch= [optional flags. ] 

    Note: npx can be substituted for yarn or npm exec depending on what package manager and the version you have installed.

    • Find or download the correct release of Electron
    • Use that version of Electron to create an app in /— (this can be customized via an optional flag)

    —platform and —arch can be omitted, in two cases:

    • If you specify —all instead, bundles for all valid combinations of target platforms/architectures will be created.
    • Otherwise, a single bundle for the host platform/architecture will be created.

    For an overview of the other optional flags, run electron-packager —help or see usage.txt. For detailed descriptions, see the API documentation.

    For flags that are structured as objects, you can pass each option as via dot notation as such:

    npx electron-packager --flag.foo="bar" # will pass in < flag: < foo: "bar">> as an option to the Electron Packager API

    If appname is omitted, this will use the name specified by «productName» or «name» in the nearest package.json.

    Characters in the Electron app name which are not allowed in all target platforms’ filenames (e.g., / ), will be replaced by hyphens ( — ).

    You should be able to launch the app on the platform you built for. If not, check your settings and try again.

    Be careful not to include node_modules you don’t want into your final app. If you put them in the devDependencies section of package.json , by default none of the modules related to those dependencies will be copied in the app bundles. (This behavior can be turned off with the prune: false API option or —no-prune CLI flag.) In addition, folders like .git and node_modules/.bin will be ignored by default. You can use —ignore to ignore files and folders via a regular expression (not a glob pattern). Examples include —ignore=\.gitignore or —ignore=»\.git(ignore|modules)» .

    Example

    Let’s assume that you have made an app based on the electron-quick-start repository on a macOS host platform with the following file structure:

    foobar ├── package.json ├── index.html ├── […other files, like the app's LICENSE…] └── script.js 

    …and that the following is true:

    • electron-packager is installed locally
    • productName in package.json has been set to Foo Bar
    • The electron module is in the devDependencies section of package.json , and set to the exact version of 1.4.15 .
    • npm install for the Foo Bar app has been run at least once

    When one runs the following command for the first time in the foobar directory:

    npx electron-packager . 

    electron-packager will do the following:

    • Use the current directory for the sourcedir
    • Infer the appname from the productName in package.json
    • Infer the appVersion from the version in package.json
    • Infer the platform and arch from the host, in this example, darwin platform and x64 arch.
    • Download the darwin x64 build of Electron 1.4.15 (and cache the downloads in ~/.electron )
    • Build the macOS Foo Bar.app
    • Place Foo Bar.app in foobar/Foo Bar-darwin-x64/ (since an out directory was not specified, it used the current working directory)

    The file structure now looks like:

    foobar ├── Foo Bar-darwin-x64 │ ├── Foo Bar.app │ │ └── […Mac app contents…] │ ├── LICENSE [the Electron license] │ └── version ├── […other application bundles, like "Foo Bar-win32-x64" (sans quotes)…] ├── package.json ├── index.html ├── […other files, like the app's LICENSE…] └── script.js 

    The Foo Bar.app folder generated can be executed by a system running macOS, which will start the packaged Electron app. This is also true of the Windows x64 build on a system running a new enough version of Windows for a 64-bit system (via Foo Bar-win32-x64/Foo Bar.exe ), and so on.

    Related

    • Electron Forge — creates, builds, and distributes modern Electron applications
    • electron-packager-interactive — an interactive CLI for electron-packager
    • grunt-electron — grunt plugin for electron-packager

    Distributable Creators

    • electron-installer-zip — creates symlink-compatible ZIP files
    • electron-winstaller — Squirrel.Windows-based installer from the Electron maintainers group
    • electron-windows-store — creates an AppX package for the Windows Store
    • electron-wix-msi — creates traditional MSI installers
    • electron-installer-windows — alternative Squirrel.Windows-based installer
    • electron-installer-dmg — creates a DMG
    • electron-installer-debian — creates a DEB file
    • electron-installer-redhat — creates an RPM
    • electron-installer-flatpak — creates a Flatpak file
    • electron-installer-snap — creates a Snap file

    Plugins

    These Node modules utilize Electron Packager API hooks:

    • electron-packager-languages — sets the locales available to Electron when packaged, which is used by the Mac App Store, among other places
    • electron-packager-plugin-non-proprietary-codecs-ffmpeg — replaces the normal version of FFmpeg in Electron with a version without proprietary codecs
    • @electron/rebuild — rebuilds native Node.js modules against the packaged Electron version

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *