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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
微信小程序 教程之模板
Oct 18 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php文件上传简单实现方法
2015/01/24 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
javascript 函数调用规则
2009/08/26 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
详解python中的lambda与sorted函数
2020/09/04 Python
给老师的检讨书
2014/02/11 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书