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 相关文章推荐
JavaScript基础知识之数据类型
Aug 06 Javascript
JS画5角星方法介绍
Sep 17 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
JavaScript中的类型检查
Feb 03 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
类似框架的js代码
2006/11/09 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python中is与==判断的区别
2017/03/28 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
毕业实习评语
2014/02/10 职场文书
学术会议主持词
2014/03/17 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
医学生自荐信范文
2015/03/05 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
python如何读取和存储dict()与.json格式文件
2022/06/25 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers