本文介绍了如何从零开始开发一个基于Electron的SwitchHost应用，利用ReactJS进行前端开发，实现Windows环境下域名映射的快速切换。内容包括 Electron 的基本概念、快速入门教程，以及详细讲解数据初始化、UI绘制与交互逻辑，最后阐述了项目打包生成exe文件的过程。
前言
市面上应该有不少切换window下域名映射的应用了，个人感觉这个功能实现起来应该不是很复杂，正好是自己切入electron学习的好机会。electron作为js生态在桌面端的重磅应用，极大地拓展了js的边界(vsCode就是用electron开发的)。最为一个前端开发，补齐桌面端的开发短板也是很有意义的一件事。
开发目标
实现一个简单的桌面端switch host应用，windows中有一个文件hosts(路径通常是C:\Windows\System32\drivers\etc\hosts),该文件维护了一个域名和ip地址的映射。一般长这样：
向文件中的域名发出请求时，将会直接向对应的ip地址发送请求体，通常用来实现本地代理，搞前端开发的应该经常会这样操作。使用#作为注释标记。在开发过程中，需要经常切换本地和线上真实环境，频繁改动这个文件比较繁琐，这里开发桌面应用来简化这个过程，提高效率。最后的成品长这样:
操作过后，配置文件中的内容也会更新,项目地址放在文末
实现
什么是electron
electron是一套基于js的桌面应用开发套件，使用它可以帮助js开发者方便地开发桌面应用，使用js开发者熟悉的html,css,js文件来绘制页面，实现交互。在使用原生能力上，electron可以开放node的能力给开发者使用，从而获得系统级别的能力，electron也封装了一系列原生的api，方便开发者调用，从而跟操作系统和桌面UI等进行交互。简单来说，可以使用前端开发者熟悉的工具链，直接实现你想要的功能，electron帮你完成了后续的封装，生成可执行文件等工作。electron的原理并不复杂，chrome的v8引擎的强劲性能给了很多开发者无限的想象力，electron也受益于chrome,它相当于把你写的js应用放到一个浏览器里面执行，从而实现开发语言和UI实现上跟前端开发工具链的无缝对接。
electron光速入门
首先编写你自己的js应用，将其整合成一个html文件，类似这样(这里是index.html)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Switch Host</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id='main'></div>
</body>
<link rel="stylesheet" href="common.css" >
<link rel="stylesheet" href="app.css" >
<script src="app.bundle.js" type="text/javascript"></script>
<script src="common.bundle.js" type="text/javascript"></script>
</html>
这可以看到，这里我把打包完成之后的文件和样式都通过内联的方式写在html文件里，打包完成之后的css和js文件跟这个html文件放在同一个目录下。我们app开发完之后的成品就长这样，然后安装electron(这里可能需要T子，或者使用国内镜像源),接下来写一个electron启动文件index.js文件：
const {
app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('app/index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。
接下来在package.json中添加命令：
"scripts": {
"start": "electron index",
},
之后就可以开启你自己的应用了npm run start,正常的话，应该会在桌面弹出一个浏览器窗口，里面绘制的就是你index.html中的内容，这个html里面要实现什么逻辑就是你说了算。
业务逻辑
electron壳子的相关逻辑到这里就结束了，接下来我们转入业务逻辑的部分。这里笔者的工具链是ts+react(函数式组件hooks)+antd,通过node中的fs和path来读取文件，通过webpack将所有逻辑打包成js和css文件，将其内联到我们的index.html里面。
数据初始化
接下来是业务逻辑，这里首先要做的就是从系统中读取hosts文件的内容，然后将其中的域名-ip映射一一提取出来，并抽象成一定的数据结构，方便后续处理，代码如下：
import React, {
useState, useEffect, useReducer } from 'react';
import * as s from<
最低0.47元/天 解锁文章
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
