電子
Electron は、 JavaScript、HTML、および CSS を使用してデスクトップ アプリケーションを構築するためのフレームワークです。
インストール
開発にElectronを使用する前に、Node.js をインストールする必要があります.ターミナルで次のコマンドを入力すると、Node.js と npm のバージョン情報を出力できます。
node -v
npm -v
インストールされていない場合は、こちらのインストール チュートリアルをクリックしてください。
次のステップは、Electronをインストールすることです。2
つの方法でインストールできます。
グローバル インストール
npm install electron -g
[g を追加するとグローバル インストールになり、環境変数に自動的に追加されます]
次のコマンドを入力してブラウザのようなプログラムをポップアップ表示することで、インストールが成功したことを確認できます。
electron
Electronの npm インストールが非常に遅い、または間違っている場合は、Taobao ミラー インストールを使用できます。
npm install -g electron --registry=https://registry.npm.taobao.org
または、最初に cnpm をインストールしてから、cnpm を使用してElectronをインストールします
上記のいずれも機能しない場合は、自分に合ったelectron.zipのみをダウンロードできます
https://registry.npmmirror.com/binary.html?path=electron/
ここでダウンロードした記事は electron-v22.0.0-win32-x64.zip です
ダウンロードした zip パッケージを、グローバル インストール ディレクトリの electron フォルダーに配置します。ここで、 install.jsファイル
を変更する必要があります。このコード ブロックにコメントを付けて、ステートメントを追加します。
extractFile('electron-v22.0.0-win32-x64.zip');
extractFile メソッドによって渡されたパラメーターが zip パッケージのパスであることがわかります.install.js
ファイルを変更した後、ターミナルはグローバル インストール ディレクトリの下の electron ディレクトリを開き、node install.jsコマンドを実行し、distフォルダー:
node install.js
このステップで、Electron がグローバルに正常にインストールされたことを意味します。! !
クイックスタート
Electronの公式クイック スタート アプリケーションを git clone できます。
git clone https://github.com/electron/electron-quick-start
プロジェクトのインストール依存関係を入力します。
cd electron-quick-start
npm install
プロジェクトは次の 2 つの方法で実行できます。
electron .
npm start
npm start は実際にelectron.commandを実行します
これが表示されたら、正常に実行されたことを意味します。! !
パック
注: Electron はプラットフォーム間でパッケージ化することはできません。現在のプラットフォームで現在のプラットフォームのアプリケーションのみをパッケージ化でき、Windows システムは Windows パッケージのみをパッケージ化できます。
次の 2 つの方法でパッケージ化されます。
electron-packager (簡単な操作、実行中のディレクトリにパッケージ化)
electron-packager を使用して機能をパッケージ化します。
操作は簡単です. パッケージ化されたディレクトリはプログラムの実行ディレクトリであり, インストール済みと同等であり, インストール後にのみ実行できます. インストーラーにパッケージ化する必要がある場合は, electron-builder を使用してパッケージ化する必要があります.それ
electron-packager をインストールします:
npm install electron-packager --save-dev
npm install electron-packager -g
クイック パッケージ コマンド:
electron-packager .
パッケージ化コマンド構成:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
sourcedir: プロジェクト ソース ファイルが配置されているパス (唯一の必須パラメーター)
appname: プロジェクト名 (package.json ファイルで name 属性を直接使用する方が便利です)
platform: ビルドするプラットフォーム アプリケーション (Windows、 arch
: ビルド アーキテクチャ ia32、x64、armv7l、arm64 を含む
out: パッケージ化されたアドレス
icon: パッケージ アイコン
asar: app.asar を生成するかどうか、そうでない場合は独自のソース コード
overwrite: 最後のパッケージを上書きする
ignore: しないファイルをパッケージ化する
electron-builder (比較的複雑で、インストーラにパッケージ化されています)
electron-builder を使用して機能をパッケージ化します。
操作は比較的複雑で、インストーラーにパッケージ化でき、パッケージング方法をカスタマイズできるため、electron-builder は electron-packager よりも高度であると言えます。
yarn をインストールします (electron-builder パッケージは yarn に依存します):
npm install -g yarn
electron-builder をインストールします。
npm install -g electron-builder
package.js ファイルのスクリプト ノードを構成します。
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"postinstall": "electron-builder install-app-deps",
"dist": "electron-builder",
"dist-win": "electron-builder --win --ia32",
"dist-win64": "electron-builder --win --x64",
"dist-mac": "electron-builder --mac",
"dist-linux": "electron-builder --linux"
}
コンパイルおよびパッケージ コマンドを実行します。
コンパイル
yarn postinstall
Windows 64 ビット アプリケーション コマンドのパッケージ化
yarn dist-win64
図の .exe は直接実行できます
実行後、アプリケーションのファイルが配置されます。
これまでのところ、パッケージは正常にパッケージ化されています。! !