能否在Electron Fiddle中使用子文件夹？附Electron Builder使用求助

一、Electron Fiddle 子文件夹使用说明 #

核心结论 #

目前Electron Fiddle 原生不支持在内置编辑器界面中直接创建、管理子文件夹结构，官方默认仅提供平级的单文件添加功能，无法在界面的文件列表里展示子目录层级。

可落地的变通方案 #

如果确实需要使用子文件夹组织代码或资源，可以用以下两种方式操作：

• 导出项目手动修改结构
  先在Electron Fiddle中完成基础项目的创建，点击顶部菜单 File > Save As 将项目导出到本地磁盘的指定目录，之后在本地文件管理器中手动新建需要的子文件夹，放入对应的资源、代码文件，再重新用Electron Fiddle打开这个导出的项目文件夹即可。Fiddle运行时会正常识别子目录内的所有文件，只是无法在内置编辑器的文件列表里展示子目录结构，修改子目录内的文件需要借助外部编辑器操作。
• 直接通过相对路径引用子目录资源
  如果子文件夹仅用于存放静态资源（图片、字体、通用工具脚本等），不需要修改子目录内的代码，可以直接在Fiddle的入口文件（main.js、index.html、renderer.js等）中用相对路径引用本地对应子文件夹的内容，路径正确的情况下运行时可以正常加载。

二、Electron Builder 基础使用指导 #

如果你后续需要支持更自由的项目结构、打包发布，可以参考以下最简操作步骤：

1. 环境准备：确保本地已安装Node.js环境，执行node -v、npm -v命令可验证安装是否成功。
2. 项目初始化：新建空项目文件夹，在目录内执行npm init -y初始化package.json配置文件，再执行npm install electron electron-builder --save-dev安装所需依赖。
3. 基础配置：在package.json中补充启动、打包相关配置，示例如下：

{
  "name": "demo-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.demo.app",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  }
}

4. 开发打包：你可以在项目内自由创建任意子文件夹结构组织资源和代码，开发完成后执行npm start可本地预览，执行npm run build即可生成对应平台的安装包。

内容的提问来源于stack exchange，提问作者Geekwithakeyboard