工具选择

目前市场上有两款比较优秀的工具可以选择，我这里是用electron-builder来打包的。

electron-builder：功能全面，适合企业级应用 官网 https://www.electron.build/

electron-forge：官方推荐，适合快速启动

安装工具

npm i electron-builder --save-dev

第二步：前端项目打包

这我里用的是create-react-app ，其它的脚手架自己去看下打包命令

yarn build

第三步: 修改加载文件

   修改mian.js主窗口加载的文件

// 连接react项目链接
const loadURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './build/index.html')}`
mainWindow = new BrowserWindow(mainWindowConfig, loadURL)

第四步： 开始配置打包相关命令

   electron-builder可以直接在package.json 里面增加命令

   这是官方的相关说明：  https://www.electron.build/configuration#artifact-file-name-template

   package.json一级属性增加build

       extends 设置为null:  https://www.electron.build/app-builder-lib.interface.configuration#extends_1

       files: 要打包哪些文件，规则在这里 https://www.electron.build/file-patterns.html#multiple-glob-patterns            

  "build": {
    "appId": "com.huangcy.markdownDoc",
    "productionName": "Markdown管理器",
    "copyright": "Copyright © huangcy ${author}",
    "extends": null,
    
  }

在package.json的scripts增加两行

"scripts": {
    // ...
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
}

在package.json的增加属性homepage ,这个主要是解决index.html打开报错问题

"homepage": "./",

到这里我们就可以npm run pack了

第一次下载好像是在github下载一个资源包，所以要网络可以访问github.com

要用npm 命令，我用了yarn 直接随了个小玩意包。。不知道哪来的。

然后打包完成后，会生成dist,进去找就知道了

常见问题：

   1. 刚打开打包好的程序，就报一个A JavaScript error occurred in the main process

        这个错误从3个方面检查，

       第一个是看package.json 有没有设置属性 : "type": "module"， 有的话要删除掉

       第二个，看看你electron项目是不是都用的require, 不能用import

       第三个： 各个库是不是都用的require, const isDev = require('electron-is-dev')   我就用这个库，一直打不到原因，后来删除掉这个库的导入才行

第五步： 针对打包配置及各平台的打包配置

   electron-builder默认情况下是根据你的操作系统来打包的，是mac就打一个mac包，是window就打一个window安装包

   directories 构建资源目录  https://www.electron.build/app-builder-lib.interface.commonconfiguration#directories

   mac 针对mac平台的特殊配置

   mac.category Mac平台安装到哪个分类下，这里是效率类型的工具  https://www.electron.build/mac.html#category

   mac.artifactName 打包出来的名称

   dmg包的配置

   win 针对window平台的配置

   win.target 想要打包的安装文件格式

 "build": {
     "directories": {
        "buildResources": "assets"
      },
      "mac": {
          "category": "public.app-category.productivity",
          "artifactName": "${name}-${version}.${ext}"
      },
      "dmg": {
          "background": "assets/appdmg.png",
          "icon": "assets/icon.icns",
          "iconSize": 100,
          "contents": [
            {
              "x": 380,
              "y": 280,
              "type": "link",
              "path": "/Applications"
            },
            {    
              "x": 110,
              "y": 280,
              "type": "file"
            }
          ],
          "window": {
            "width": 500,
            "height": 500
          }
       },
       "win": {
          "target": [
            "msi",
            "nsis"
          ],
          "icon": "assets/icon.ico",
          "artifactName": "${name}-Web-Setup-${version}.${ext}"
       },
 }

最后我的package.json文件

{
  "name": "markdownDoc",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "description": "这是一个本地Markdown文档管理器",
  "author": {
    "name": "huangcy"
  },
  "dependencies": {
    "@ant-design/v5-patch-for-react-19": "^1.0.3",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.25.1",
    "axios": "^1.9.0",
    "classnames": "^2.5.1",
    "concurrently": "^9.1.2",
    "easymde": "^2.20.0",
    "electron-is-dev": "^3.0.1",
    "electron-store": "^7.0.3",
    "lodash": "^4.17.21",
    "qiniu": "^7.14.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-icons": "^5.5.0",
    "react-scripts": "5.0.1",
    "react-simplemde-editor": "^5.2.0",
    "reset.css": "^2.0.2",
    "sass": "^1.87.0",
    "uuid": "^11.1.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\" ",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^36.2.0",
    "electron-builder": "^26.0.12",
    "wait-on": "^8.0.3"
  },
  "homepage": "./",
  "build": {
    "appId": "com.huangcy.markdownDoc",
    "copyright": "Copyright © huangcy ${author}",
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "settings/**/*",
      "package.json",
      "main.js",
      "./src/preloads/**/*",
      "./src/menuTemplate.js",
      "./src/AppWindow.js"
    ],
    "extends": null,
    "extraMetadata": {
      "main": "./main.js"
    },
    "directories": {
      "buildResources": "assets"
    },
    "mac": {
      "category": "public.app-category.productivity",
      "artifactName": "Markdown管理器-${version}.${ext}"
    },
    "dmg": {
      "background": "assets/appdmg.png",
      "icon": "assets/icon.icns",
      "iconSize": 100,
      "contents": [
        {
          "x": 380,
          "y": 280,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 110,
          "y": 280,
          "type": "file"
        }
      ],
      "window": {
        "width": 500,
        "height": 500
      }
    },
    "win": {
      "target": [
        "msi",
        "nsis"
      ],
      "icon": "assets/icon.ico",
      "artifactName": "${name}-Web-Setup-${version}.${ext}"
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
      "perMachine": false
    }
  }
}