electron

//vi main.js
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')

//let win: BrowserWindow | null = null;
const createWindow = () => {
    //if (win !== null) {
    //    return;
    //}
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            //__dirname 当前js的目录, preload在启动进程前运行,因此preload.js还在主进程
            preload: path.join(__dirname, 'preload.js'),
            // 打开这选项，可以在渲染进程使用node
            // 否则就只能在主进程使用node，所有消息靠进程间通信实现
            // 但是electron官方非常不推荐，这样不太安全
            nodeIntegration: true,
            contextIsolation: false,
            webSecurity: false
        },
        icon: '/path/to/icon.png',
        frame: false // 设置无边框窗体
    })

    const menu = Menu.buildFromTemplate([
    {
        label: app.name,
        submenu: [
            {
                //win.webContents == ipcRenderer.send
                click: () => win.webContents.send('update-counter', 1),
                label: 'Increment'
            },
            {
                click: () => win.webContents.send('update-counter', -1),
                label: 'Decrement'
            }
        ]
    }])
    Menu.setApplicationMenu(menu)

    win.loadFile('index.html')
    //win.on('close', () => win = null);
    
    win.webContents.openDevTools() // Open the DevTools.
}

app.whenReady().then(() => {
    console.log("platform = " +process.platform)
    console.log("electron version = " + process.versions['electron'])
    console.log("node version = " + process.versions['node'])
    console.log("chrome version = " + process.versions['chrome'])

    ipcMain.on('set-title', (event, title) => {
        const webContents = event.sender
        const win = BrowserWindow.fromWebContents(webContents)
        win.setTitle(title)
    })
    ipcMain.handle('dialog:openFile', async () => {
        const { canceled, filePaths } = await dialog.showOpenDialog()
        if (!canceled) {
            return filePaths[0]
        }
    })
    ipcMain.on('async-req', (event, arg) => {
        console.log(arg)
        event.reply('async-rps', 'pong')
    })
    ipcMain.on('sync-req', (event, arg) => {
        console.log(arg)
        event.returnValue = 'pong'
    })

    createWindow()
    if (process.platform === 'darwin') {
        app.on('activate', () => {
            if (BrowserWindow.getAllWindows().length === 0) {
                createWindow()
            }
        })
    }
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

//app.on('activate', () => {
//    createWindow();
//})

//vi preload.js 这里是render进程
const { contextBridge, ipcRenderer } = require('electron')

//mainword是NodeJS进程 render的js调用${nodejs.chrome()} window.nodejs.ping() window.nodejs.setTitle(title)
contextBridge.exposeInMainWorld('nodejs', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    send: ipcRenderer.send, //直接运行render发送进程通信
    aping: () => ipcRenderer.send('async-req', 'ping'),
    ping: () => {const r = ipcRenderer.sendSync('sync-req', 'ping') console.log(r)},
    setTitle: (title) => ipcRenderer.send('set-title', title),
    openFile: () => ipcRenderer.invoke('dialog:openFile'),
    //window.nodejs.menuCounter((event, value) => {event.sender.send('counter-value', newValue)})  其中event.sender.send 相当于ipcRenderer.send
    menuCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

ipcRenderer.on('async-rps', (_event, arg) => {
    console.log(arg)
})

window.addEventListener('DOMContentLoaded', () => {
    const item = document.getElementById(item_id)
    if (item) {
        item.innerText = "hello change world"
    }
})

//forge.config.js 中macos 签名
module.exports = {
    packagerConfig: {
        osxSign: {},
        osxNotarize: {
            tool: 'notarytool',
            appleId: process.env.APPLE_ID,
            appleIdPassword: process.env.APPLE_PASSWORD,
            teamId: process.env.APPLE_TEAM_ID
        }
    }
}

//window 签名
module.exports = {
    makers: [
        {
            name: '@electron-forge/maker-squirrel',
            config: {
                certificateFile: './cert.pfx',
                certificatePassword: process.env.CERTIFICATE_PASSWORD,
                iconUrl: 'https://url/to/icon.ico',
                setupIcon: '/path/to/icon.ico',
                //其它 都设置icon: '/path/to/icon.png'
            }
        },
        //多平台
        {
          "name": "@electron-forge/maker-zip",
          "platforms": ["darwin", "linux", "windows"],
          "config": {}
        }
    ]
}

//webpack.base.config.js
module.exports = {  
    module: {  
        rules: [  
            // typescript  
            {  
                test: /\.ts$/,  
                use: 'ts-loader',  
                exclude: /node_modules/  
            },  
            // css (style loader在前 css loader在后)  
            {  
                test:/\.css$/,  
                use: [ 'style-loader', 'css-loader'],  
                exclude: /node_modules/  
            },  
            // .node native (这里例子中用不到)
            {  
                test: /\.node$/,  
                exclude: /node_modules/,  
                use: 'node-loader'   
			}  
        ]  
    }  
};

//webpack.main.config.js
const path = require('path');  
const webpack = require('webpack');  
const { merge } = require('webpack-merge');  
const nodeExternals = require('webpack-node-externals');  
const webpackBaseConfig = require('./webpack.base.config');  
  
module.exports = merge(webpackBaseConfig, {  
    mode: 'development',  
    target: 'node',  
    entry: path.join(__dirname, 'src/main/main.ts'),  
    output: {  
	    // 注意输出目录
        path: path.join(__dirname, 'dist/main'),  
        filename: 'main.js'  
    },  
    externals: [nodeExternals()],  
    plugins: [  
        new webpack.EnvironmentPlugin({  
            NODE_ENV: 'development'  
        })  
    ],  
    node: {  
        __dirname: false,  
        __filename: false  
    }  
});

//webpack.render.config.js
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackBaseConfig = require('./webpack.base.config');

module.exports = merge(webpackBaseConfig, {
    mode: 'development',
    target: 'electron-renderer',
    entry: path.join(__dirname, 'src/render/render.ts'),
    output: {
        path: path.join(__dirname, 'dist/render'),
        filename: 'render.js'
    },
    plugins: [
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'development'
        }),
        new HtmlWebpackPlugin({
            inject: 'body',
            scriptLoading: 'defer',
            minify: false,
            filename: 'index.html',
            template: path.join(__dirname, 'src/render/index.html')
        }),
    ],
});