比来在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用措施的一门技术。对付之前一直从事flash AIR桌面应用开发的我迫不及待的想“试试鲜”。
首先,我们随着Electron社区的快速入门措施(https://electronjs.org/docs/tutorial/quick-start)创建我的第一个electron App(HelloWorld)。
1.在命令行里安置全局electron:
npm install -g electron
Ps:在这之前你需要安置nodejs,npm。
2.参照入门措施,app创建完成,包机构如下:
前面我们全局安置了electron,如何运行app呢?
在当前窗口打开命令行,输入如下命令:
electron .
app创建告成!不要着急,本讲的重点是介绍如何打包成exe(折腾了我泰半天),看了好多别人关于打包的博文,可能由于本身是一个初学者理解不够深入,感受都不是那么通俗易懂,,所以筹备一气呵成,写一篇分享给后面学习的人。言归正传,
3.安置打包工具,我是使用的electron-packager,首先全局安置一下:
npm install electron-packager -g
4.打包之前需要在当前app里安置依赖(上面运行是操作electron的全局命令,打包需要app里安置本身的依赖,后面且称做局部依赖),当前app的依赖只有electron,在命令行执行:
electron -v
获取当前electron全局安置的版本号。
5.编纂package.json,npm安置局部依赖:
npm install
6.测试局部依赖是否安置告成,在app根目录执行命令行:
npm start
措施运行,局部依赖安置告成。
7.打包前为当前app制作icon:icon.ico,256*256。制作好放入app根目录。
8.electron-packager打包:electron-packager打包有两种方法,一是直接在命令行编纂命令,直接进行打包。另一种是在package.json里编纂package,执行npm run-script package。
(1)在app根目录执行命令行:
electron-packager . ‘HelloWorld‘ --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包告成。如图
(2)首先编纂package.json,
在app(electron-helloworld)根目录创建app文件夹,并把main.js, index.html 和 package.json拷贝进去(拷贝并非剪切),然后在electron-helloworld根目录打开命令行:
npm run-script package
打包成告成。
小结:对付electron-packager的第二种打包要领(编纂package.json的打包要领),为什么要建app文件夹,是通过看别人的博文和多次测试得到的结论,由于是初学,暂且认为是一种机制吧,但愿通过后面的学习来越发深刻的认识里面的含意。