因由
因业务原因，需要选择一款跨PC平台APP开发框架，选来选去，最后落在NW.js与Electron二选一的问题。在Hello World级入门测试及综合参考其他平台的评价后，最终决定选择Electron。因为当前本人相对熟悉PhpStorm，所以试图把它配置好作为Electron开发的IDE使用。无奈，还是碰壁不少，所以觉得还是有必要记录下有关细节，供自己及相关朋友参考。
过程
首先，在入门Hello World时，我还是老实参考Electron官网上的例子，各文件如下。
配置文件package.json内容如下：
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "description for this simple app.",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "Xianzhong Zhu",
"license": "MIT",
"devDependencies": {
"electron": "^16.0.5"
},
"dependencies": {},
"keywords": []
}
HTML文件index.html内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
启动主程序文件main.js内容如下：
const {app, BrowserWindow} = require('electron')
const createWindow=()=>{
const win=new BrowserWindow({
width:800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(()=>{
createWindow()
})
命令行下初步成功
为慎重起见，我首先在PHPStorm内容命令行下根据官网操作要求测试，一切顺利，最后运行命令是在当前项目文件夹下运行如下命令：
npm start
运行结果如下：
其中，右边部分是Google Chrome快捷键（我使用的是MAC下的经改造后的普通键盘，此时对应组合键Windows＋Alt＋I）按下后调出的测试工具界面。这一点将极大方便了后期应用开发的调试。
PHPStorm下碰壁
高兴之余，想进一步进行PHPStorm配置，毕竟我当前IDE是这个，但是麻烦来了：按照引用2说明配置后，运行程序，总是得到如下错误：
即完整的英文错误技术如下：
TypeError: Cannot read properties of undefined (reading 'whenReady')
最开始，我认真分析了文后引用文章2，但是它存在不少问题：
（1）画面太模糊，关键文字不好参考；
（2）存在BUG，误导了我的配置。
无奈，使用必应引擎在国外网站搜索，主要参考了stackoverflow.com和github.com平台上框架Electron自身FAQ部分，错误还是无法解决。
曙光乍现
循着上述提示，搜索了国内外网站，基本没有结果。老实说，在这个问题上浪费了不少时间，但是这一关必须过去；否则，除非放弃使用PHPStorm开发Electron！在经过一番“坎坷”之后，无意间看到引文中的第一篇：何不进去看一下，都是JetBrains的产品，而且我以前也使用过，说不定会有所发现。
确定如此，因为JetBrains的好几款IDE都支持基于Node.js框架的开发配置，正是从中找到了正确答案！
纠正错误
参考上述外文，对应于引文2，正确的答案配置截图如下所示：
关键点在于，上面Node interpreter一行，不是Node，而是Electron！在我的机器上完整内容如下：
~/Documents/my-electron-app/node_modules/.bin/electron
其中，my-electron-app是我的项目文件夹，electron是结合electron官网提示在本项目域下配置安装的electron框架主程序。
如此，再点击PHPStorm IDE界面上的运行程序（右箭头图标）按钮，一切顺序：得到如前面命令行运行后的正确的Hello World界面！
小结
小结才是最重要的！作为初级程序员，最大的“悲哀”就是在许多初级问题上耗费大量光阴，也可能主要是这方面原因，导致许多“程序员”远遁出程序员阵营！“一网复一网，终有一网得......”唉，想多了......
