基本项目搭建 - rxliuli blog
source link: https://blog.rxliuli.com/p/475d21afd2404d5ba1f71f600c44da09/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
- Windows 10
- NodeJS 12
- WebStorm
- VSCode（编写 markdown 文档）
创建 lerna 项目
创建目录 _electron_example_，然后使用 yarn 初始化
1
2
mkdir electron_example && cd electron_example
yarn init -y
修改 package.json
1
2
3
4
5
6
7
8
9
{
"name": "electron_example",
"version": "1.0.0",
"private": true,
"license": "MIT",
"workspaces": {
"packages": ["apps/*"]
}
}
随后创建 lerna.json 配置文件
1
2
3
4
5
6
{
"packages": ["apps/*"],
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true
}
初始化目录如下
- apps
- main: 主进程
- renderer: 渲染进程
- _node_modules_
- lerna.json
- package.json
- yarn.lock
参考: https://github.com/rxliuli/electron_example/tree/b9628e1fd16bb5b6807e55e9ca72fdf2daf5bfde
初始化渲染层模块
在 renderer 目录中使用 create-react-app 创建一个 react 项目，并添加
1
npx create-react-app apps/renderer/ --template typescript
不过还需要修改其中部分配置，主要包含
- 删除 yarn.lock 或 package-lock.json 文件
参考: https://github.com/rxliuli/electron_example/tree/8e0920af985e1201fc05ca36302e094532843c2d
尝试再 yarn 安装依赖，接着再使用 yarn start 启动开发环境，应该可以在浏览器中看到默认的页面。
初始化主进程模块
参考: https://github.com/rxliuli/electron_example/tree/a78885b76de9322dfdac82e2c220b7c6e0a9617f
注：electron 版本选择双数，生命周期更长。
初始化主进程模块，主要包括
为主进程创建 package.json
1
2
3
4
{
"name": "main",
"version": "0.1.0"
}
添加依赖 yarn add electron electron-builder typescript
1
2
3
4
5
6
7
8
// package.json
{
"devDependencies": {
"electron": "^10.2.0",
"electron-builder": "^22.9.1",
"typescript": "^4.1.3"
}
}
添加 tsconfig.json 配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// tsconfig.json
{
"compilerOptions": {
// nodejs 生态大多数都支持这种模块
"module": "commonjs",
// 优先考虑输出 es5
"target": "es5",
// 但不要自缚手脚，仍然使用最新的 es 特性
"lib": ["ESNext"],
// 定义源目录与输出目录
"rootDir": "src",
"outDir": "dist",
// 生成 sourceMap 方便 IDE 本地调试
"sourceMap": true,
// 禁止 ts 检查 npm 依赖的类型定义（例如 electron 的类型定义就很容易被 ts 检查出错误，毕竟这个项目实在太大了）
"skipLibCheck": true,
"skipDefaultLibCheck": true
},
// 排除依赖目录与输出目录
"exclude": ["node_modules", "dist"]
}
添加 src/main.ts 基本的启动文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/main.ts
import { app, BrowserWindow } from "electron";
async function createMainWindow() {
// 创建新的 electron 窗口
const mainWindow = new BrowserWindow();
// 载入开发环境的 url
await mainWindow.loadURL("http://localhost:3000/");
}
/**
* main 函数
*/
async function main() {
app.on("ready", createMainWindow);
}
main();
更新 package.json 添加几个 npm script
1
2
3
4
5
6
7
8
9
10
11
12
13
// package.json
{
"scripts": {
// 编译 ts 代码
"compile": "tsc",
// 编译 tsc 代码且启动监听模式
"watch": "yarn compile -w",
// 在主进程通过 lerna 启动渲染进程模块的开发环境
"dev:web": "lerna run --scope renderer start",
// 启动主进程的开发环境
"dev:electron": "electron ./dist/main.js"
}
}
接下来，我们通过这些 npm script 启动 electron 开发环境
- 运行
yarn watch - 运行
dev:web - 等待以上两条命令都运行完成，再继续运行
dev:electron
现在，你应该可以看到一个 electron 窗口，其中显示着。
目前，使用 lerna monorepo 似乎还看不出来明显的优点，不过实际上在后面逐步完善 Electron 程序的过程中我们会发现它的强大之处。
Recommend
-
10
rxliuli blog 博客迁_ 2020年12月29日 早上 355 字 ...
-
14
最近看完了 1984 这本小说，在之后也补了一下电影 Youtube 正版电影 一些设定令人惊奇 真理部：负责新闻、娱乐、教育、艺术 和平部：负责战争 有爱不：负责维持法律和秩序 富裕部：负...
-
13
本文最后更新于：2020年12月31日 上午 框架及社区react: 前端流行的 mvc 框架
-
19
该清单只是吾辈所用，使用工具因人而异，若是你对清单中的内容有何异议，可以在下方进行留言，吾辈会尽快阅读并回复！ 附：列出的 Google Drive 链接是因为某些第三方 App 不在 Play Store 之中，而且在可预期的很长时间内都不可能在（Yout...
-
17
JavaScript 中的 ES6 Proxy Ja_ 2020年12月30日 下午 3.3k 字 ...
-
22
为什么需要它有些时候不得不需要限制并发 fetch 的请求数量，避免请求过快导致 IP 封禁 需要做到什么允许限制 fetch 请求同时存在的数量 时间过久便认为是超时了 该方法的请求是无序的！...
-
25
最近想在家里搭个本地服务器玩，于是便买了个树莓派 4。现在，吾辈已经让它在纸盒里默默吃灰了。 为什么吾辈搭建服务器？ 为什么吾辈要选择树莓派？ 以及为何最终它还是吃灰了？ 上面这些问题吾辈会在下面一一解答...
-
9
公司在业务快速扩张中，需要大量招人，前端目前有 4 个，但计划再招 9 个。 我们是谁？我们做什么？近年来，爱病理打造了专业实名病理工作者平台、实时镜下共享视野系统等口碑产品。 通过专业的内容分享、丰...
-
13
2019 回忆及 2020 目标 20_ 2020年2月2日 上午 1.4k 字 ...
-
5
在碎片化学习的时代，没有体系化/总结的知识很快会被彻底遗忘，而博客可以帮助我们记忆平时零碎的知识。有人似乎认为想玩博客就必须要域名/服务器，这里吾辈不得不说明一下，这个认知是错误的。 对于绝大多数网站来说，静态是无法满足复杂的需求的。然而...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK