如何搭建Electron开发环境
原文发表于
https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/
这个项目结构是我在编写 基于Electron 和 Angular 的七牛文件上传App 总结出来的
本文主要介绍如何从零开始搭建高效的Electron开发环境, 主要内容如下:
通过合理的目录划分来组织代码
使用
npm script
简化开发如何在渲染进程开发时使用热更新
如何在主进程开发时使用自动重启
如何在主进程开发时使用
Typescript
如何打包和发布软件
示例项目地址 https://github.com/lleohao/el...
发现 http://hao.jser.com/ 这个网站臭不要脸的转载文章
目录结构划分
初始化目录
首先按照常规的方法新建一个项目文件夹(这里我的示例文件夹叫做electron-base
, 然后使用npm init
初始化目录。
目前我们的开发目录如下:
electorn-base
├── .gitignore - git忽略文件
├── LICENSE - 开源协议
├── README.md - 文档
└── package.json - npm package
目录划分
Electron 的开发主要分为两个部分, 其中主进程(Main Process)主要负责打开页面和调用系统底层的资源等, 渲染进程(Renderer Process)则是一个普通的网页窗口.
两个进程的开发有着不同的开发方式, 主进程更像是传统Node
的开发, 而渲染进程则是普通的前端开发. 同时它们之间又有着可以共用的部分(如辅助函数、数据模型等), 因此可以按照下面的方式划分
electorn-base
├── ... - 省略
└── src - 代码源文件├── main - 主线程代码├── renderer - 渲染线程└── shared - 公用代码
Electron quick start
接下来运行npm install electron -D
安装Electron,同时在package.json
添加main
字段, 这代表整个项目的入口文件,这里我们先设置为src/main/main.js
.
顺便添加上两个文件
# src/main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')let winfunction createWindow() {win = new BrowserWindow({ width: 800, height: 600 })win.loadURL(url.format({pathname: path.join(__dirname, '../renderer/index.html'),protocol: 'file:',slashes: true}))// Open the DevTools.win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed', () => {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.win = null})
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)// Quit when all windows are closed.
app.on('window-all-closed', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (win === null) {createWindow()}
})
<!-- src/renderer/index.html -->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using node <script>document.write(process.versions.node)</script>,Chrome <script>document.write(process.versions.chrome)</script>,and Electron <script>document.write(process.versions.electron)</script>.</body>
</html>
在根目录运行electron .
(或者是./node_modules/.bin/electron .
)启动程序
为了以后方便启动程序, 将这段命令添加到package.json
中
// package.json 部分内容
"main": "src/main/main.js",
"scripts": {"start": "./node_modules/.bin/electron ."
},
"devDependencies": {"electron": "^1.7.5"
}
开发渲染线程
渲染线程的开发跟普通的前端开发没有多大的区别, 为了开发的效率, 我们通常会选择一款前端开发框架, 这里我选择的是Angular
, 当然也可以选择其他的框架, 只需要按照下文中的要求修改打包路径.
导入Angular(可选, 使用其他框架可以跳过)
这里我使用Angular-cli
工具来初始化项目
安装cli工具
`npm install -g @angular/cli`
初始化目录
` ng new electron-base -sd src/renderer -si -sg -st --routing true --styles scss `
修改
.angular-cli.json
"apps": [{"root": "src/renderer", // 源文件目录"outDir": "out/renderer", // 输出目录"baseHref": "./", // 解决打包后无法加载文件... }]
如何在开发过程中进行代码热更新
前端开发中, 我们可以使用webpack
享受到自动刷新、热更新等方便的功能, 那么在Electron的开发过程我们如何享受的到这些功能了?这里我们只需要简单的修改下main.js
文件即可
function isDev() {return process.env['NODE_ENV'] === 'development'
}function createWindow() {win = new BrowserWindow({ width: 800, height: 600 })if (isDev()) {// 这里的url换成你所使用框架开发时的urlwin.loadURL('http://127.0.0.1:4200');} else {win.loadURL(url.format({pathname: path.join(__dirname, '../renderer/index.html'),protocol: 'file:',slashes: true}))}// Open the DevTools.win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed', () => {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.win = null})
}
开发时我们还是按照以前的方式启动一个webpcak
服务器进行开发, Electron通过HTTP
协议打开页面, 这样我们依旧可以享受到代码热更新等功能.
通过设置环境变量NODE_ENV
来区分开发和生成环境, 在package.json
中添加两个命令来方便开发
"scripts": {"ng": "ng", // angular alias"start": "NODE_EBV=production ./node_modules/.bin/electron .", // 添加环境变量"dev:renderer": "ng serve" // 启动渲染线程开发服务器
},
打包渲染线程代码
开发完成后我们需要将前端的代码进行代码打包, 一个好的习惯是将代码的打包目录放置在项目的根目录中, 这里我将前端的打包目录设置在out/renderer
中
Angular项目只需要修改.angular-cli.json
中的outDir
字段, 其他的框架可以自行修改.
在package.json
中添加打包命令
"scripts": {...."build:renderer": "ng buidl --prod" // 打包渲染线程代码
},
开发主线程
主线程的开发如Node
程序的开发没有多大的区别, 这里就不多赘述.
虽然Node
对ES6
的支持已经很完善了, 但更新的标准的支持就不怎么好, 这里我们可以使用Babel
之类的工具进行来使用最新的语法.
这里我推荐使用Typescript
, 优点主要有三个:
静态检查, 毕竟是主线程的代码, 有点错误可就是程序直接崩溃的节奏
自动提示, 这个不解释
编译方便, 比起
Babel
的配置文件,Typescript
的配置要简单的多
使用Typescript (不使用的可以跳过)
安装
Typescript
运行npm install typescript -D
添加配置文件, 在
src
目录下添加tsconfig.main.json
文件{"compilerOptions": {"outDir": "../out", // 输出目录, 同渲染线程放在一起"sourceMap": true, // 调试时需要"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es6", // 输出代码版本, 由于在Node中运行, es6没问题"module": "commonjs", // module 处理方式"typeRoots": [ // .d.ts 目录"../node_modules/@types"],"lib": [ // 可选, 添加新的语法支持"es2017"]},"exclude": [ // 排除渲染线程目录"renderer"] }
在
package.json
中添加开发和打包命令"scripts": { ..."dev:main": "tsc -p ./src/tsconfig.main.json -w", // 开发"build:main": "tsc -p ./src/tsconfig.main.json" // 打包 }
主线程调试 (使用的编辑器是vscode)
添加启动配置文件, 项目根目录新建
.vscode
文件夹,在其中新建launch.json
{// Use IntelliSense to learn about possible Node.js debug attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch Program","cwd": "${workspaceRoot}","runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron","program": "${workspaceRoot}/src/main/main.ts", // 你的主文件"sourceMaps": true, "outFiles": ["${workspaceRoot}/out/**/*.js" // 你的输出文件目录],"env": {"NODE_ENV": "development"}}] }
使用组合键
ctrl + f5
启动程序在文件中添加断点进行调试
主线程开启自动刷新 (可选)
我们的渲染线程可以做到代码变更后自动刷新页面, 在主线程的开发中我们可以使用 nodemon 来实现同样的功能
安装
nodemon
npm install nodemon -D
修改启动命令
"scripts": {"start": "nodemon --watch src/main --watch src/shared --exec './node_modules/.bin/electron' ./out/main/main.js" }
以后开发时只需要运行npm start
就可做到主线程的自动刷新
打包主线程
主线程的开发过程我们可能会使用其他的构建工具, 这里我们同渲染线程一样, 将主线程的打包文件放在out
目录中, 至此打包目录的结构应当如下
out
├── main - 主线程打包文件位置
│ └── main.js - 入口文件
├── renderer - 渲染线程打包位置
│ ├── ....
│ └── index.html - 入口页面
└── shared - 公用文件└── utils.js
打包和发布
electron-builder 可以将我们的程序打包成可执行文件, 它的配置信息发在package.json
中
这里配置的是Mac
的打包信息, 具体的可以自行查阅文档
{"main": "out/main/main.js", // 入口文件"scripts": {..."pack": "electron-builder -m --dir", // 简单打包软件, 用于测试"dist": "electron-builder -m", // 正式打包软件"build": "npm run build:renderer && npm run build:main && npm run dist" // 打包软件},"build": {"appId": "com.lleohao.sample", // 自行修改 "mac": {"category": "public.app-category.productivity" // 自行修改}}
}
运行npm build
即可打包软件
开发流程
运行
npm run dev:renderer
启动渲染线程开发运行
npm run dev:main
启动主线程开发运行
npm start
打开Electron
程序运行
npm build
打包程序
示例项目地址 https://github.com/lleohao/el...
如何搭建Electron开发环境相关推荐
- electron 开发环境搭建
electron开发环境的搭建共包括两个部分:一.动态链接库(dll)编译部分:二.Native模块编译部分 tips:cnpm和npm的依赖可能不同,npm安装时可以通过任务管理器查看网速 ``` ...
- emacs 搭建racket开发环境
emacs 搭建racket开发环境 emacs下搭建开发racket的环境,笔者之前用过下面两种模式:geiser和racket-mode.相对而言,后一种方式要显得简单.本文主要介绍后一种方式环境 ...
- 在CentOS 6.2上搭建vim开发环境
在CentOS 6.2上搭建vim开发环境 最后更新日期:2013-07-05 1.首先使用Ubuntu(所在ip为192.168.16.230)翻墙登陆http://www.vim.org/,下载其 ...
- Windows7/10上快速搭建Tesseract-OCR开发环境操作步骤
之前在https://blog.csdn.net/fengbingchun/article/details/51628957 中描述过如何在Windows上搭建Tesseract-OCR开发环境,那时 ...
- 7 centos 源码安装samba_CentOS搭建WonderTrader开发环境及v0.5.4版本发布
前言 之前发过一篇关于如何搭建WonderTrader开发环境的文章<从零搭建WonderTrader的开发环境>,帮助不少用户解决了一些编译源码的问题.因为笔者是在Ubuntu 18.0 ...
- Windows下搭建PHP开发环境
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- python ai应用开发_AI应用开发实战 - 从零开始搭建macOS开发环境
AI应用开发实战 - 从零开始搭建macOS开发环境 联系我们 OpenmindChina@microsoft.com 零.前提条件 一台能联网的电脑,使用macOS操作系统 请确保鼠标.键盘.显示器 ...
- mac搭建python开发环境_Mac中基于Homebrew搭建python开发环境
转移到mac上了.这里是在lion中搭建python开发环境的简单记录.这份记录不是一份step by step.而是事后写的记录,可能有记忆遗漏.如果有错误,请指正. 1.安装homebrew的准备 ...
- Windows 10 搭建Python开发环境(PyCharm )
Windows 10 搭建Python开发环境(PyCharm ) 一.安装Python3 二.安装Pycharm 怎么使用PyCharm编写Python程序,简单教程. windows下安装pyth ...
最新文章
- 微软发布屏蔽Win10升级的官方办法
- ccform 表单的单据打印
- c++ 在哪里找文档来看_FPX双C十四连败引热议!Doinb:我再也不跟LWX双排了
- 动画图解 socket 缓冲区的那些事儿
- Java中List Set Map 是否有序等总结
- python解约瑟夫环问题
- 培养创造力的10个注意点
- 微信小程序上传接口php,微信小程序API 上传、下载
- vnc远程桌面_手机vnc远程桌面,手机vnc远程桌面,使用配置详解
- 敏捷开发一千零一问系列之八:团队习惯了分工怎么办?
- python3.8.5-Python 3.8.5下载
- idea插件安装在哪个目录_从零开始编写自己需要的IntelliJ IDEA 插件
- apache+weblogic获取客户端访问的真正ip
- js实现删除页面元素
- 出售计算机广告英文作文,英语四级作文参考范文:二手电脑广告
- 在线问诊第一平台微医引入智齿 构建智慧客服体系
- hdu-1052 Tian Ji -- The Horse Racing
- ps多边形套索工具按过delete以后点下一个点点不出来
- uniapp公众号微信支付
- 牛客网试题+答案分析+大牛面试经验(1)