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 相关文章推荐
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
ES5新增数组的实现方法
May 12 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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
header跳转和include包含问题详解
2012/09/08 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
js密码强度实时检测代码
2016/03/02 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
python使用matplotlib绘制热图
2018/11/07 Python
Django 多环境配置详解
2019/05/14 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
几个Linux面试题笔试题
2016/08/01 面试题
上课迟到检讨书100字
2014/01/11 职场文书
后进生转化工作制度
2014/01/17 职场文书
料理师求职信
2014/01/30 职场文书
《猫》教学反思
2014/02/26 职场文书
5s推行计划书
2014/05/06 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书