资讯专栏INFORMATION COLUMN

如何搭建Electron开发环境

TwIStOy / 3184人阅读

摘要:原文发表于如何搭建开发环境这个项目结构是我在编写基于和的七牛文件上传总结出来的本文主要介绍如何从零开始搭建高效的开发环境主要内容如下通过合理的目录划分来组织代码使用简化开发如何在渲染进程开发时使用热更新如何在主进程开发时使用自动重启如何在主

原文发表于 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 win

function 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 + Q
    if (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()
    }
})



  
    
    Hello World!
  
  
    

Hello World!

We are using node , Chrome , and Electron .

在根目录运行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换成你所使用框架开发时的url
        win.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程序的开发没有多大的区别, 这里就不多赘述.

虽然NodeES6的支持已经很完善了, 但更新的标准的支持就不怎么好, 这里我们可以使用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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87428.html

相关文章

  • Hola~ 一款基于Electron的聊天软件

    摘要:前言本项目旨在从零到壹,制作一款界面精美的聊天软件。因为本人是开发,设计功底欠缺,所以软件设计的有点丑,如果有大神有更好的,欢迎。 Hola 前言 本项目旨在从零到壹,制作一款界面精美的聊天软件。 Github 地址因为已工作,所以可能没有多少时间来继续跟进这个项目了,项目可优化的点已在下文列出,欢迎大家 Fork 或 Star。 ps: 征 logo 一枚。因为本人是开发,设计功底...

    Kaede 评论0 收藏0
  • electronVue+bootstrapVue搭建桌面应用开发环境

    摘要:下安装安装和脚手架样板代码安装依赖并运行你的程序环境下安装在你的入口文件中注册组件,并且相应的代码实例 1.npm下安装electron npm install electron -g 2.安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project 3.安装依赖并运...

    warnerwu 评论0 收藏0
  • electron + react + react-router + mobx + webpack 搭

    摘要:调试集成环境选择模块,简单分离开发,测试,线上环境。程序保护开机自启托盘最小化崩溃监控升级一行代码接入升级平台,实现客户端升级功能打包构建一个指令搞定打包项目地址 项目地址 : https://github.com/ConardLi/electron-react electron-react electron + react + react-router + mobx + webpac...

    pingan8787 评论0 收藏0
  • 使用Electron+avalon+jquery+codemirror开发自己的IDE

    摘要:入口,可为数组指明那些文件名是要扫描到的没什么稀奇的,就是配了的路径和注意如果你要使用也是,尽量使用来解决的坑,的配置我就不讲了配置好了就可以愉快的开始开发了其实还是传统的写网页而已,只不过可以加入了,很酷炫是不是 在纠结了一个月之后,发了无数帖子,我终于舍弃nw.js投入electron的怀抱,事实证明我是对的,electron居然有中文文档,还有官方示例,简直不要太爽! showI...

    jzzlee 评论0 收藏0
  • Electron 前端提测小工具

    摘要:场景目前公司的测试环境还是由开发来搭建和部署的。没网,我就做个离线版的工具呗。调研选型技术目前我了解到使用前端技术做桌面应用有和以及着三种神器。好了,多说无用,来预览一下我们的小工具吧默认,就是最新的要提测的包。更新于年月日已入手。 场景 目前公司的测试环境还是由开发来搭建和部署的。这种做法是极其不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。先来预览一下工...

    Riddler 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<