使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

 

• https://electronjs.org/ —— 官網
• https://github.com/electron/electron-api-demos/releases —— 下載demo

 

下載安裝：

# 克隆示例項目的倉庫
$ git clone https://github.com/electron/electron-quick-start

# 進入這個倉庫
$ cd electron-quick-start

# 安裝依賴並運行
$ npm install && npm start

安裝打包插件/安裝並打包：

npm install electron-packager -g

參數以下爲打包執行命令的原型：

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

執行以下：

electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules

成功運行完成後，生成文件：

點擊查看結果以下：

 

部分參數解釋：

• rimraf 一個豪華版本的rm -rf，兼容window。
• cross-env 一個豪華版本的環境變量設置，有NODE_ENV=*的地方，就能夠考慮使用cross-env，兼容window。
• ./，通常爲package.json的位置。具體能夠見這裏：https://newsn.net/say/electron-quick-start-modify.html
• appname，這個會影響你打包完畢的可執行文件（exe/dmg）的名字（appname.exe）。
• --platform和--arch，這兩個參數有很是多的變形。這裏有詳細解釋：https://newsn.net/say/electron-packager-basic.html
• --win32metadata.FileDescription，文件描述信息。見這裏：https://newsn.net/say/electron-packager-exe-info.html
• --overwrite，是否覆蓋原有的生成文件。它和下面幾項有關係：--out=out、--ignore=out、rimraf out。
• --ignore，要排除掉的不打包的文件，能夠疊加效果。主要是出於減小最終文件大小的考慮。
• --no-prune，這個參數請慎用，是說不處理node_modules裏面dev依賴包，把相關的代碼都放進最終asar裏面。默認狀況下，是會將dev相關的node_modules裏面的包給去除以後，再打包的。注意：目前的最新版electron-packager裏面沒有--prune參數。
• --electron-version，指定打包時使用的electron的版本。見這裏：https://newsn.net/say/electron-packager-control-version.html 。注意：最新版的electron-packager沒有--version參數。
• --out打包完的可執行文件，放在在哪裏。
• --icon設置打包的時候的圖標。敲黑板重點，每天有人問如何更換這個圖標，就這裏更換。圖標製做的問題，請參見：https://newsn.net/say/electron-mac-icns.html 和 https://newsn.net/say/electron-ico-format.html 。圖標都是特製的圖標，妄圖不製做圖標就能天衣無縫更換的想法，都是徒勞的。千萬牢記。
• --asar打包選項，是否在resource文件夾下面，生成app.asar文件。不然將會是個app文件夾加上本身的代碼文件。