打包Mac应用(dmg)

main.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')

const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS, } = require('electron-devtools-installer')


process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';


const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })



    const template = [
        {
            label: 'Help',
            submenu: [
                { // adds submenu
                    label: `About US`,
                },
                {
                    type: 'separator' // horizontal line between submenu items
                },
                {
                    label: 'Quit',
                    role: 'quit' // closes app when clicked  
                }
            ]
        },
        {
            label: 'Refresh', // Refreshes or reloads the page when clicked
            role: 'reload'
        },
        {
            label: 'ZoomIn', // zooms the page when clicked
            role: 'ZoomIn'
        }
    ]
    const menu = Menu.buildFromTemplate(template) // sets the menu
    Menu.setApplicationMenu(menu)

    mainWindow.loadFile('./index.html')

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    // installExtension(installExtension.REACT_DEVELOPER_TOOLS)
    //     .then((name) => console.log(`Added Extension:  ${name}`))
    //     .catch((err) => console.log('An error occurred: ', err))
    // installExtension(installExtension.REDUX_DEVTOOLS)
    //     .then((name) => console.log(`Added Extension:  ${name}`))
    //     .catch((err) => console.log('An error occurred: ', err))

})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。
// 安装
app.on('ready', createWindow)
    .whenReady()
    .then(() => {
        console.log('dddddd');
        installExtension(REACT_DEVELOPER_TOOLS)
            .then((name) => console.log(`Added Extension:  ${name}`))
            .catch((err) => console.log('An error occurred: ', err))
        installExtension(REDUX_DEVTOOLS)
            .then((name) => console.log(`Added Extension:  ${name}`))
            .catch((err) => console.log('An error occurred: ', err))
    })

index.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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hddddelldfdfo 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>.

    <script src="./renderer.js"></script>
  </body>
</html>

pageage.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "^20.1.1"
  },
  "dependencies": {
    "electron-devtools-installer": "^3.2.0",
    "electron-installer-dmg": "^4.0.0",
    "electron-packager": "^16.0.0"
  }
}

preload.js

// preload.js

// All the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

开发环境搭建好后：

npm install electron electron-packager electron-installer-dmg
npx electron-packager .
npx electron-installer-dmg ./emp-darwin-x64/emp.app/ emp

Electron桌面开发-笔记

打包Mac应用(dmg)