初探 Electron（1）快速开始&打包

初探 Electron（1）快速开始

我真的是要惊呆了好不好，我知道说VSCode是用TypeScript写的……但是，真的好迷啊……他们不是桌面应用吗……
然后直到我看见了它——Electron

Electron（官网）

用JavaScript、HTML和CSS构建跨平台桌面应用程序

好懂吗？
只能举个例子了：VSCode就是这样来的~
好吧，还是不懂……

然后吧……往下滑

告诉我你看到了什么

惊不惊喜意不意外……

好吧，其实人家本来就是GitHub开发的~
这么好玩的东西当然要试一试了~

试一试~

1.下载 API demos

npm install慢到绝望还失败，但是可以用cnpm install，链接：
https://github.com/electron/e...

不想麻烦的人推荐直接下载releases吧，链接如下：
https://github.com/electron/e...

2.git clone quickstart

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install
npm start

3.原来是个hello world，老套哼

4.目录结构

重要的：
├── package.json
├── main.js
└── index.html

package.json：main字段指定的脚本是应用程序的启动脚本，它将运行主进程。没有main.js会默认找index.js。

main.js：应该创建windows和处理系统事件

index.html：你想要展示的网页

5.打包~

安装 electron-packager

    //for use from cli
    cnpm install electron-packager -g
    //(全局安装，命令才有效)
    
    //for use in npm scripts
    cnpm install electron-packager --save-dev

package.json

  "devDependencies": {
    "electron": "~1.6.2",
    "electron-packager": "^9.0.1"
  }

5.1 命令行打包

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

electron-packager . ELECTRON-QUICK-START --Platform=win32 --arch=ia32

location of project：项目所在路径
name of project：打包的项目名字
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
arch: ia32 ,x64
optional：可选选项

5.2 package.json

  "scripts": {
    "start": "electron .",
    "packager" : "electron-packager . ELECTRON-QUICK-START --platform=win32 --arch=ia32  --overwrite "
  }

npm run-script packager

报错：

D:\Electron\electron-quick-start>electron-packager . ELECTRON-QUICK-START --Platform=win32 --arch=ia32
Downloading tmp-11240-0-electron-v1.6.13-win32-ia32.zip
Error: connect ETIMEDOUT 52.216.224.208:443
connect ETIMEDOUT 52.216.224.208:443

据说因为需要翻墙~

参考文档

中文API翻译
官网quickstart
官网APIdemos
electron-packager