electron 安装,调试,打包的具体使用


Posted in Javascript onNovember 06, 2019

项目推荐

想要快速的了解 electron, 调试 electron, 打包 electron, 推荐项目electron-webpack-quick-start

快速开始

先安装 cross-env,用于设置环境变量。因为在后面安装electron, 需要下载, 默认的源在国内下载很慢,需要通过设置环境变量来切换下载地址

#安装cross-env,用于设置环境变量的
npm install cross-env -g

Clone项目到本地

# Clone repository
git clone https://github.com/electron-userland/electron-webpack-quick-start.git

进入项目目录

cd electron-webpack-quick-start

安装项目依赖

cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm install

对比 electron 7.0.0,说明下为什么没有设置npm_config_electron_custom_dir 环境变量。该项目用的 electron版本是 5.0.6,所以环境变量只用设置 ELECTRON_MIRROR。可以看下 electron-download文件下的 index.js文件,只有默认 url 里加了 v, 设置 ELECTRON_MIRROR 后, url 里不会带 v

get baseUrl () {
  if (this.version.indexOf('nightly') !== -1) {
   return process.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'
  }
  return process.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'
 }

体验调试

输入命令

npm run dev

效果图

electron 安装,调试,打包的具体使用

体验编译

输入命令

npm run compile

效果图

electron 安装,调试,打包的具体使用

体验打包

我想打包成一个免安装的 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-webpack dev",
  "compile": "electron-webpack",
  "dist": "yarn compile && electron-builder",
  "dist:dir": "yarn dist --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"
  }
 }
}

输入命令

npm run dist

这步第一次运行的时候很慢,因为要下载,第一次运行图:

electron 安装,调试,打包的具体使用

第二次运行,就快多了,不过 building 这里有点慢,第二次运行图:

electron 安装,调试,打包的具体使用

生成的免安装的 exe见下图, 想要给别人用,只需拷这个就行。我运行了下,启动速度有点慢, 花了11秒。

electron 安装,调试,打包的具体使用

程序运行效果图

electron 安装,调试,打包的具体使用

体验完毕,可以开始学习 electron了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
weui中的picker使用js进行动态绑定数据问题
Nov 06 #Javascript
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 #Javascript
vue项目强制清除页面缓存的例子
Nov 06 #Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
You might like
php实现TCP端口检测的方法
2015/04/01 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
JavaScript日历实现代码
2010/09/12 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Android分包MultiDex策略详解
2017/10/30 Python
Python中Threading用法详解
2017/12/27 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python爬虫基础之urllib的使用
2020/12/31 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
研究生求职自荐书
2014/06/23 职场文书
物业消防安全责任书
2014/07/23 职场文书
父亲节感言
2015/08/03 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js