electron 应用打包配置

一、安装 electron-builder

npm install electron-builder --save-dev

二、 在 package.json 中配置文件

{
  "name": "cloud-doc",
  "version": "1.0.0",
  "main": "main.js",
  "description": "应用的描述",
  "author": {
    "name": "我的名字",
    "email": "我的邮箱"
  },
  "repository": "https://github.com/ *** github 项目地址", // 自动更新的时候会有用到
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "electron-store": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "buildMain": "webpack", // 执行webpack.config.js文件
    "onlyEle": "nodemon --watch main.js --watch src/menuTemplate.js --exec \"electron .\"", // 只开启electron 
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm run start\"", // 同时打开浏览器
    "dev1": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm run start\"",
    "pack": "electron-builder --dir",
    "dist": "electron-builder", // 正式包
    "release": "electron-builder", // 自动更新的时候会用到
    "prerelease": "npm run build && npm run buildMain",
    "prepack": "npm run build && npm run buildMain",
    "predist": "npm run build && npm run buildMain"
  },
  "homepage": "./", // 否则打包生成的引用找不到文件
  "build": {
    "appId": "cloudDoc",
    "productName": "markdown 云文档",
    "copyright": "Copyright © 2019 ${author}",
    "files": [ // 需要打包进去的文件
      "build/**/*",
      "node_modules/**/*",
      "settings/**/*",
      "package.json"
    ],
    "directories": { 
      "buildResources": "assets" // 打包文件放在 assets 如图标之类的
    },
    "extraMetadata": {
      "main": "./build/main.js" // electron main.js 的路径
    },
    "publish": ["github"], 
    "extends": null,
    "mac": {
      "category": "public.app-category.productivity", // 放在效率的文件分类下
      "artifactName": "${productName}-${version}-${arch}.${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": "${productName}-Web-Setup-${version}.${ext}", // 应用的名称
      "publisherName": "Viking Zhang"
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true, // 设置安装在那个文件下
      "oneClick": false,
      "perMachine": false
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "axios": "^0.19.0",
    "qiniu": "^7.2.2",
    "concurrently": "^4.1.1",
    "cross-env": "^5.2.0",
    "electron": "^5.0.6",
    "electron-builder": "^21.2.0",
    "wait-on": "^3.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "classnames": "^2.2.6",
    "electron-is-dev": "^1.1.0",
    "electron-store": "^4.0.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "react-simplemde-editor": "^4.1.0",
    "uuid": "^3.3.2"
  }
}
// json 文件不能有注释

webpack.js 文件的内容如下：

// 在webpack.config.js 中将main.js 打包到build中 简化收到打包package.json 填入路径的麻烦
const path = require('path')
module.exports = {
    target: 'electron-main',
    entry: './main.js', // 入口文件
    output: {
        path: path.resolve(__dirname, './build'), // 打包的路径
        filename: 'main.js' // 打包的文件名
    },
    node: {
        __dirname: false // 否则 webpack __dirname会变为根目录
    }
}

三、打包完成后 用 asar 工具可以查看打包的内容

npm install -g asar
asar extract app.asar ./app
asar extract electron.asar ./electron
// 将源文件打包成asar文件