最近想做一个mac的桌面的小工具，经过调研后决定使用Electron进行开发。
Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架,它将 Chromium 和 Node.js 的事件循环整合到了一起，同时提供了一些与原生系统交互的 API。
在开发语言上选择了TypeScript
TypeScript是一种通过添加类型定义来扩展JavaScript的语言。
在框架上则选用了熟悉的React
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。它让你使用小巧而独立的「component」，来建立复杂的 UI。
Quick Start
首先我们通过create-react-app创建一个新的React项目
1
2
3
| npx create-react-app react-ts-electron-starter --template typescript
cd react-ts-electron-starter
yarn run
|
这时我们可以看到浏览器新标签中打开了 http://localhost:3000/
如果看到了上图，恭喜你已经迈出了第一步，接下来我们开始在这个react项目中添加Electron
1
2
| yarn add electron-is-dev electron-reload
yarn add -D concurrently electron electron-builder wait-on
|
然后在public文件夹中添加Electron的启动脚本 electron.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 900, height: 680});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', () => mainWindow = null);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
|
并通过package.json中的main字段指定该启动脚本
1
| "main": "public/electron.js",
|
最后我们需要把electron的启动命令和打包命令添加到package.json
1
2
| "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "yarn build && electron-builder"
|
激动人新的时刻来了,启动我们的项目
这时可以看到我们的程序出现在桌面上
我们再尝试一下打包
这时可以看到打包好的程序就在dist目录下。
Environment
1
2
3
4
5
6
7
8
9
10
| $ node -v
v12.13.1
$ yarn -v
1.21.1
$ npm -v
6.4.1
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.2
BuildVersion: 19C57
|
项目结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| ├── LICENSE
├── README.md
├── build
│ ├── asset-manifest.json
│ ├── electron.js
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── precache-manifest.7cb256453d95f0189a9447ad66531c7d.js
│ ├── robots.txt
│ ├── service-worker.js
│ └── static
├── dist
│ ├── builder-effective-config.yaml
│ ├── latest-mac.yml
│ ├── mac
│ ├── react-ts-electron-starter-0.1.0-mac.zip
│ ├── react-ts-electron-starter-0.1.0.dmg
│ └── react-ts-electron-starter-0.1.0.dmg.blockmap
├── package.json
├── public
│ ├── electron.js
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock
|
Github
此项目相关内容已托管于Github，可以clone代码直接使用
https://github.com/Angboo/react-ts-electron-starter
Question
- 如果我们遇到node-gyp rebuild 执行失败的情况，可以尝试执行下面的命令重装xcode command line tool
1
2
| sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
|