用Electron包裝一個mac桌面應用

Electron介紹

使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用
Electron官網

前提

安裝好node.js
有現有的npm項目，或npm init一個新項目

安裝

到已經有的項目中，安裝electron

npm install --save-dev electron

如果速度很慢或停止很久不動，改用cnpm試一下

cnpm install --save-dev electron

修改package.json

{
  "name": "your-app",
  "version": "0.1.0",
  "scripts": {
    "start": "webpack-dev-server --open --hot --mode development",
  }
}

修改爲：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "app": "electron .",
    "start": "webpack-dev-server --open --hot --mode development",
  }
}

main.js爲桌面應用的入口文件
修改scripts.start，或者添加scripts.app用來專門跑桌面應用

main.js

const { app, BrowserWindow } = require('electron')

// 保持對window對象的全局引用，如果不這麼做的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win

function createWindow () {
  // 創建瀏覽器窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加載index.html文件
  //win.loadFile('./dist/index.html')
  win.loadURL('http://localhost:8080/#/')

  // 打開開發者工具
  win.webContents.openDevTools()

  // 當 window 被關閉，這個事件會被觸發。
  win.on('closed', () => {
    // 取消引用 window 對象，如果你的應用支持多窗口的話，
    // 通常會把多個 window 對象存放在一個數組裏面，
    // 與此同時，你應該刪除相應的元素。
    win = null
  })
}

// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)

// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
  // 通常在應用程序中重新創建一個窗口。
  if (win === null) {
    createWindow()
  }
})

loadURL中填寫瀏覽器調試地址方便桌面應用中調試，發佈後用loadFile壓縮後的文件

運行

npm start

或

npm run app