Electron

[rainit2006]

ーーーーーーーーーーーーーーーー

[rainit2006]

应用例：

• d3-space-filler-explorer An Electron application that visualizes disk space use with multiple D3 layouts. https://github.com/UsabilityEtc/d3-space-filler-explorer

• How to choose , read, save, delete or create a file with Electron Framework https://ourcodeworld.com/articles/read/106/how-to-choose-read-save-delete-or-create-a-file-with-electron-framework

• 用VisualStudioCode来调试Electron https://code.visualstudio.com/docs/nodejs/debugging-recipes

• Electronアプリを公開するまでにやったことノウハウまとめ https://qiita.com/toshi3221@github/items/2420a6188dc18acc2c64

---

Windows平台cmd里常用命令： cls; npm view electron

[rainit2006]

入門

• インストール方法（前提：node.jsとnpmがインストールした） https://gist.github.com/umamichi/ff5b812caf1466c2c2e5768b7837a1e7

  $ npm i electron -g
  $ electron

• Spin up the Quick Start app to see Electron in action: https://electronjs.org/

• 新規プロジェクトの作成

  $ mkdir ElectronApp
  $ cd ElectronApp
  $ npm init -y

  https://qiita.com/yoshizaki_kkgk/items/8917fc4350d17a44773d

• Run this app using the following command − $ electron ./main.js

• 打包（使用electron-packager） electron-packager [ディレクトリ名] [アプリ名] --platform=[OS名] --arch=[アーキテクチャ] --electron-version=[バージョン] electron-packager . HelloWorldDemo --platform=win32 --arch=all --electron-version=1.8.2

在包下的resources文件夹里的app文件夹 就是我们写的程序，这样我们的代码就是暴露在用户电脑上的，这非常的不安全，还好electron 自带了加密功能。 安装 asar:npm install --save-dev asar 安装完成以后,就可以使用asar命令讲程序文件打包了， asar pack ./app app.asar

执行完毕以后，在./下可以看到app.asar文件，把他复制到./OutApp/mclans.../resources/下，然后把resources下的app文件夹删除，运行resources上层的appName.exe文件可以启动应用了。 http://blog.csdn.net/u010683528/article/details/56279647

• 打包(使用asar) https://electronjs.org/docs/tutorial/application-packaging package your app into an asar archive:

• 利用 electron-builder 实现 electron app 的署名／打包／发布以及自动更新 https://nicholaslee119.github.io/2018/01/11/electronBuilder%E5%85%A8%E5%AE%B6%E6%A1%B6%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/

• Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと https://nulab-inc.com/ja/blog/typetalk/3-points-for-releasing-production-electron-app/

• 加密代码 安装 asar: npm install --g asar 安装完成以后,就可以使用asar命令讲程序文件打包了， asar pack ./app app.asar 执行完毕以后，在./下可以看到app.asar文件，把他复制到./OutApp/mclans.../resources/下，然后把resources下的app文件夹删除，运行resources上层的appName.exe文件可以启动应用了。

• Electron - Building UIs https://www.tutorialspoint.com/electron/electron_building_uis.htm

  $ npm install -g bower
  $ bower install bootstrap  //error: proxy problem
  bowerのproxy設定方法：https://gist.github.com/taichi/6409876

• Debugging Electron in Visual Studio Code http://electron.rocks/debugging-electron-in-vs-code/

---

npm install optionについて --save / --save-dev / --save-optional の違い

• --save は package.json の dependencies に追記される。
• --save-dev は package.json の devDependencies に追記される。
• --save-optional は package.json の optionalDependencies に追記される。

それぞれの違いだが、package.jsonがモジュールとして外部に公開し、他の人がnpm installした時に影響する。 他の人が npm install した時に、dependencies に指定したパッケージが全てインストールされる。 devDependencies に追記したものは開発時にのみ使うパッケージを指定するのに使う。そのパッケージの利用者にとっては不要で、開発者のみが使うため、利用者が npm install パッケージ名 するときはこの依存パッケージはインストールされない。もし devDependencies もインストールしたい場合は、--dev 設定を有効化(これはnpm installのオプションではなく、 npm help 7 config にあるようにnpmの設定である)して、npm install パッケージ名 --dev とする。 ただし、利用者がpackage.json含めたソースコード全体をgitなどからcloneして開発する = 開発者と同等の立場として、追加パラメータ無しで package.json のあるディレクトリで npm install とだけした場合は、開発者の立場になるわけなので、devDependencies もインストールされる。というか、依存関係は全てインストールされるらしい。 --production つければ、package.jsonのところで npm install --production なら devDependencies はインストールされない。 dependencies と devDependencies の使い分けだが、パッケージやプロジェクトが実行時に必要となるのを dependencies に設定し、ビルド時だけしか使われないようなビルドツール・ライブラリなどは devDependencies に入れておくと良さそう。 optionalDependenciies に追記したものは、通常のnpm installでインストールされるが、インストールに失敗してもスルーされる。正直、使いドコロがよくわからない。

[rainit2006]

常见报错或者问题

• 注意 Githubissues.

• Githubissues is a development platform for aggregating issues.