本文记录了一位开发者初次使用Electron构建图形化工具时遇到的问题及解决方案，包括点击按钮无响应、Uncaught ReferenceError: require is not defined错误以及打包EXE失败的修复方法。通过调试和学习，最终成功解决了一系列开发难题。
记Electron初体验的踩坑之旅
背景
为什么要写electron的背景就是，在平常的业务中因为项目需要做国际化，所以经常需要反复跳来跳去来复制i18n的key，然后又要在几千行的json文件中去找这个key在哪个对象里面。最重要的是这种工作是你要兼顾几种语言就要重复几次的。
这时候我就想，有没有可能做一个图形化工具来实现自动将所输入的内容自动插入到json文件的对应位置。
具体的需求是：
第一个输入框输入json文件的对应键，比方说输入a.b.c；
第二个输入框输入英文文本，这个文本会插入到json_En.json文件的对应位置a:{b:{c:{...}}}中；
第三个输入框输入中文文本，这个文本会插入到json_Zh.json文件的对应位置a:{b:{c:{...}}}中。
那就开干
因为此前没有任何Electron的基础，所以第一时间是找到了大名鼎鼎的GPT先生，我向它具体阐述了我的需求，它很快的给出了它的答案了。
初版代码
下面是一个简单的步骤指南（其实已经结合了我自己的修改了）：
-
创建项目文件夹：首先，创建一个新的文件夹作为项目的根目录。你可以选择一个合适的名称，比如
json-insert-tool。 -
初始化项目：在项目文件夹中打开命令行终端，并运行以下命令来初始化npm项目：
npm init
这将引导你完成npm项目的初始化过程，并生成一个package.json文件。 -
安装依赖：我们需要安装Electron作为项目的依赖项。在命令行终端中运行以下命令：
npm install electron -S -
创建主进程文件：在项目文件夹中创建一个名为
main.js的文件。这将是Electron应用的主进程文件，负责启动应用和管理窗口。 -
编写主进程代码：在
main.js文件中，添加以下代码：const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); function createWindow() { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); const indexPath = url.format({ protocol: 'file', pathname: path.join(__dirname, 'index.html'), slashes: true }); mainWindow.loadURL(indexPath); // 打开开发者工具（可选） // mainWindow.webContents.openDevTools(); mainWindow.on('closed', () => { app.quit(); }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });这段代码用于创建Electron窗口，加载
index.html文件，并处理窗口关闭事件。 -
创建HTML文件：在项目文件夹中创建一个名为
index.html的文件，作为应用的主界面。 -
编写HTML代码：在
index.html文件中，添加以下HTML代码：<!DOCTYPE html>
最低0.47元/天 解锁文章
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
