1. 程式人生 > >使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

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

OS releases unknown AC node 圖標 變形 optional 兩個

  • 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=outrimraf 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文件夾加上自己的代碼文件。

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