Mac安装搭建electron教程

原创 2016年04月16日 16:46:55

简介:本文介绍Mac上安装node,npm及electron的过程,附带helloworld程序。

一.安装Node.js

输入brew install node就可以完成Node.js和npm的安装。输入npm -v查看npm的版本号,以确认安装无误.

二.安装electron

输入npm install -g electron-prebuilt进行安装。
但是在国内直接这样是安装不了的,我们通过启动Privoxy和shadowsocks实现http代理:

npm config set proxy http://127.0.0.1:8118
npm config set http-proxy http://127.0.0.1:8118

输入npm install -g electron-packager安装打包工具.其安装目录为:/usr/local/lib/node_modules/electron-packager
备注:没有Privoxy和shadowsocks的可以参考此处设置淘宝的cdn加速.

三.跑跑helloworld

参考官方的quick start,clone下来这个项目,然后运行:npm install && npm start就ok了。
npm install 是安装依赖,npm start是打开app。

electron-quick-start/node_modules/electron-prebuilt/dist目录可以看到一个Electron.app文件.
之所以能使用npm start就是因为我们的electron-prebuilt这个东西,但这仅仅是个预构建,如果需要打包还需要下面的packager.

四.electron-packager的使用

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<version>

通过electron-packager --help或者usage.txt
我把最重要的一部分附录下:

Usage: electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch>

Required options

sourcedir          the base directory of the application source
platform           all, or one or more of: darwin, linux, mas, win32 (comma-delimited if multiple)
arch               all, ia32, x64

Example            electron-packager ./ --platform=darwin --arch=x64

Optional options

appname            the name of the app, if it needs to be different from the "productName" or "name" in the nearest package.json

所以在Mac上运行如下命令:
electron-packager ./ --platform=mas --arch=x64
由于未指定版本所以会自动下最新的electron-v0.37.6-mas-x64.zip,electron列表.如果要指定版本号:
electron-packager ./ --platform=mas --arch=x64 --version=0.37.5

如果要打Windows平台的包:electron-packager ./ demo --platform=win32 --arch=x64 --version=0.37.6

总结:通过使用electron,可以最大限度的用前端的这一套开发pc上的东西,唯一的缺点就是打包出来的体积为啥那么大呢,一个helloworld竟然100多M。。。。。

官网document

electron(开发混合式桌面应用框架)-Mac OS简单快速安装(2016-12-10)

1.1 安装nrmnpm install -g nrm1.2 安装cnpmnpm install -g cnpm #淘宝出品的与npm一样用途的产品1.3 使用nrm选择源nrm ls #查看源nrm...
  • a2824256
  • a2824256
  • 2016年12月10日 14:54
  • 1552

mac部署electron过程

部署electron过程: 1.  先行准备配置npm环境避免下载过程过慢. 处理过程参照: http://blog.csdn.net/ab7936573/article/details/537...
  • ab7936573
  • ab7936573
  • 2016年12月23日 10:49
  • 2199

初探 Electron - 理论篇

转载自:http://jartto.wang/2018/01/03/first-exploration-electron/ 提起构建桌面应用,最先想到的肯定是 NW.js ,但却一直不温...
  • ivan820819
  • ivan820819
  • 2018年01月16日 22:45
  • 35

【Electron】Electron开发入门(一):开发环境搭建

刚接触Electron+js开发PC端桌面应用程序的时候,简直一头雾水,搜了网上很多教程,有的要么讲的零零碎碎,要么就是版本太低,很多API语法都不能用了;现在我把一些有用的教程归纳一下,并把目前最新...
  • arvin0
  • arvin0
  • 2016年09月18日 17:41
  • 7761

Mac OS上使用Electron

第一步:安装Homebrew 终端执行ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/insta...
  • u011871686
  • u011871686
  • 2017年11月01日 21:49
  • 188

使用electron打包桌面应用

目录结构与文件 Electron App的目录结构如下: your-app/ ├── package.json ├── main.js └── index.html 你应用里的 packag...
  • frank_hehe
  • frank_hehe
  • 2016年10月13日 22:51
  • 9469

【Electron】Electron开发入门(五):项目打包

一、安装 electron-packagerPS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 “main”: “app/ma...
  • arvin0
  • arvin0
  • 2016年09月28日 14:06
  • 22340

electron 打包web应用

时下流行的web app打包工具主要有两个,一个是国内开发者主导的nw.js,另一个是国外大厂支撑的electron。对比了nw.js以及electron之后还是选择了electron,原因主要有以下...
  • lc598470345
  • lc598470345
  • 2016年04月09日 23:05
  • 6511

nodejs(1):mac 安装nodejs & electron 环境开发桌面应用

1,下载node安装包https://github.com/electron/electronElectron 是 Github 发布跨平台桌面应用开发工具,支持 Web 技术开发桌面应用开发,其本身...
  • freewebsys
  • freewebsys
  • 2017年05月06日 20:07
  • 750

electron ubuntu镜像安装及入门

新项目是在electron上开发的。electron 模拟桌面应用,比如手机app这种。 听上去高大上的。很开心跑去安装。结果发现,呢嘛,有墙啊。安装好多次都无法下载下来。我表示很懵逼啊。 后来才...
  • xixi880928
  • xixi880928
  • 2016年06月23日 17:17
  • 1463
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Mac安装搭建electron教程
举报原因:
原因补充:

(最多只允许输入30个字)