electron 安装,调试,打包的具体使用
项目推荐
想要快速的了解electron,调试electron,打包electron,推荐项目electron-webpack-quick-start
快速开始
先安装cross-env,用于设置环境变量。因为在后面安装electron,需要下载,默认的源在国内下载很慢,需要通过设置环境变量来切换下载地址
#安装cross-env,用于设置环境变量的 npminstallcross-env-g
Clone项目到本地
#Clonerepository gitclonehttps://github.com/electron-userland/electron-webpack-quick-start.git
进入项目目录
cdelectron-webpack-quick-start
安装项目依赖
cross-envELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"npminstall
对比electron7.0.0,说明下为什么没有设置npm_config_electron_custom_dir环境变量。该项目用的electron版本是5.0.6,所以环境变量只用设置ELECTRON_MIRROR。可以看下electron-download文件下的index.js文件,只有默认url里加了v,设置ELECTRON_MIRROR后,url里不会带v
getbaseUrl(){ if(this.version.indexOf('nightly')!==-1){ returnprocess.env.NPM_CONFIG_ELECTRON_NIGHTLY_MIRROR|| process.env.npm_config_electron_nightly_mirror|| process.env.npm_package_config_electron_nightly_mirror|| process.env.ELECTRON_NIGHTLY_MIRROR|| this.opts.nightly_mirror|| 'https://github.com/electron/nightlies/releases/download/v' } returnprocess.env.NPM_CONFIG_ELECTRON_MIRROR|| process.env.npm_config_electron_mirror|| process.env.npm_package_config_electron_mirror|| process.env.ELECTRON_MIRROR|| this.opts.mirror|| 'https://github.com/electron/electron/releases/download/v' }
体验调试
输入命令
npmrundev
效果图
体验编译
输入命令
npmruncompile
效果图
体验打包
我想打包成一个免安装的exe程序,所以我在package.json文件里添加了:
"build":{ "productName":"HelloWord", "appId":"scripter.HelloWord", "win":{ "target":["portable"] }, "portable":{ "artifactName":"HelloWord.exe" } }
整个package.json内容如下:
{ "name":"electron-webpack-quick-start", "version":"0.0.0", "license":"MIT", "scripts":{ "dev":"electron-webpackdev", "compile":"electron-webpack", "dist":"yarncompile&&electron-builder", "dist:dir":"yarndist--dir-c.compression=store-c.mac.identity=null" }, "dependencies":{ "source-map-support":"^0.5.12" }, "devDependencies":{ "electron":"5.0.6", "electron-builder":"^21.0.11", "electron-webpack":"^2.7.4", "webpack":"~4.35.3" }, "build":{ "productName":"HelloWord", "appId":"scripter.HelloWord", "win":{ "target":["portable"] }, "portable":{ "artifactName":"HelloWord.exe" } } }
输入命令
npmrundist
这步第一次运行的时候很慢,因为要下载,第一次运行图:
第二次运行,就快多了,不过building这里有点慢,第二次运行图:
生成的免安装的exe见下图,想要给别人用,只需拷这个就行。我运行了下,启动速度有点慢,花了11秒。
程序运行效果图
体验完毕,可以开始学习electron了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。