官网搜索找到一个node-inno,npmjs
上看popularity
只有4%。这里用一个npmjs使用较多的 electron-packager
PS: 用完electron-packager后,发现electron-builder更好~
nodejs版本至少要大于4.0
electron-packager比较大,安装很容易失败,请看
npm install electron-packager --save-dev
报错了
D:\project\electron>npm install electron-packager --save-dev
> electron@3.0.7 postinstall D:\project\electron\node_modules\electron
> node install.js
Downloading tmp-14536-1-SHASUMS256.txt-3.0.7
Error: connect ETIMEDOUT 52.216.16.216:443
D:\project\electron\node_modules\electron\install.js:49
throw err
^
Error: connect ETIMEDOUT 52.216.16.216:443
at Object._errnoException (util.js:1022:11)
at _exceptionWithHostPort (util.js:1044:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1198:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@3.0.7 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@3.0.7 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
原因使用了官方npm源,太慢
D:\project\electron>nrm ls
* npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
切换到最快的cnpm
后,还是失败
D:\project\electron>nrm test
* npm ---- 736ms
cnpm --- 159ms
taobao - 342ms
nj ----- Fetch Error
rednpm - Fetch Error
npmMirror 1152ms
edunpm - Fetch Error
D:\project\electron>nrm use cnpm
Registry has been set to: http://r.cnpmjs.org/
D:\project\electron>npm install electron-packager --save-dev
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://cnpmjs.oss-ap-southeast-1.aliyuncs.com/electron-osx-sign/-/electron-osx-sign-0.4.11.tgz failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
切换到taobao
后,安装成功
D:\project\electron>nrm use taobao
Registry has been set to: https://registry.npm.taobao.org/
D:\project\electron>npm install electron-packager --save-dev
> electron@3.0.7 postinstall D:\project\electron\node_modules\electron
> node install.js
Downloading tmp-11764-0-SHASUMS256.txt-3.0.7
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
+ electron-packager@12.2.0
added 2 packages and updated 1 package in 9.78s
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
参数 | 说明 |
---|---|
sourcedir | 项目路径 |
appname | 打包后的名称 |
—platform | 要构建应用的目标平台(Windows、Mac 还是 Linux),允许值:linux,win32,darwin,mas,all |
—arch | 用x86 还是用 x64 还是两个架构都用 |
—all | 设置true时,—platform和—arch都会设置为all |
—icon | 图标,使用本地路径 |
—out | 输出目录 |
—ignore | 正则表达式,指定忽略的文件,out 设置的目录会默认忽略 |
—overwrite | 覆盖已经存在的输出目录 |
更多参数,参数API: https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
前面安装时,使用了--save-dev
,所以只能在package.json里设置后运行。如果在直接在命令行运行,请全局-g
安装
...
"scripts": {
"start": "electron .",
"packager":"electron-packager ./ ElectronHelloWorld --out ./dist --appVersion 1.0.0 --overwrite"
},
...
控制台执行npm run packager
,会在dist
目录生成ElectronHelloWorld-win32-x64
文件夹
打开ElectronHelloWorld.exe
文件,OK,Hello World
出来了
electron通过reactjs自定义最大化、最小化、关闭功能
无边框窗口是不带外壳(包括窗口边框、工具栏等),只含有网页内容的窗口。 这些是 BrowserWindow 类上的选项。透明窗口是没有阴影部分。利用css设置自定义区域可拖动。
nsis中文手册及安装
对electron目录调整后,打包白屏?而使用electron-packager打包没问题,什么原因呢?
electron .命令是什么?能换成别的目录吗?当然可以~
electron-builder相对electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新,electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序
window下使用 electron-packager将electron打包成exe可执行文件
electron快速开始入门