puppeteer入门及使用electron打包（二）

一、参考文档

1、electron官方文档：electronjs.org/docs

2、electron-builder github地址：github.com/electron-us…

3、electron-builder官方文档：www.electron.build/configurati…

4、electron-builder-webpak官方文档：webpack.electron.build/

二、如何使用

使用electron-builder提供的支持了webpack的入门仓库：

git clone https://github.com/electron-userland/electron-webpack-quick-start.git

修改renderer/index.js

import main from './beijing/index'
main.start()

启动：

npm run dev

打包：

npm run dist

打包免安装版：

npm run dist:dir

三、修改打包配置

  "build": {
    "productName": "税务申报安装程序",
    "appId": "com.frosee.app",
    "copyright": "frosee",
    "compression": "maximum",
    "directories": {
      "output": "build"
    },
    "asar": true,
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./icons/aims.ico",
      "uninstallerIcon": "./icons/aims.ico",
      "installerHeaderIcon": "./icons/aims.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "开始税务申报"
    },
    "dmg": {
      "contents": [{
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "icons/icon.icns"
    },
    "win": {
      "icon": "icons/aims.ico",
      "target": [{
        "target": "nsis",
        "arch": [
          "ia32"
        ]
      }]
    },
    "linux": {
      "icon": "icons"
    }
  }

四、修改菜单

修改主进程 /src/mian

app.on('ready', () => {
  const template = [
    {
      label: '文件(F)',
      accelerator: 'F',
      submenu: [
        {
          label: "退出",
          role: "quit"
        },
      ]
    },
    {
      label: '调试(D)',
      accelerator: 'D',
      submenu: [
        {
          label:"重新加载",
          role:"forceReload"
        },
        {
          label: "打开/关闭控制台",
          role: "toggleDevTools"
        },
      ]
    },
    {
      label: '帮助(H)',
      accelerator: 'H',
      submenu: [
        {
          label: '关于',
        }
      ]
    }
  ];

  const appMenu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(appMenu);
  mainWindow = createMainWindow()
})

修改上下文菜单（鼠标右键菜单）,渲染进程/src/renderer/

const { remote } = require('electron');
const { Menu } = remote;

const createContextMenu = () => {
    const contextTemplate = [
        {
            label: '重新加载',
            role: 'forceReload'
        },
        {
            label: '关闭',
            role: 'close'
        },
        {
            label: '退出',
            role: 'quit'
        }
    ];
    const contextMenu = Menu.buildFromTemplate(contextTemplate);
    return contextMenu;
}

window.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    const contextMenu = createContextMenu();
    contextMenu.popup({
        window: remote.getCurrentWindow()
    });
}, false);

五、静态文件

放到/static文件夹下

path.join(__static, '/bw.json')

六、代码分离

  "electronWebpack": {
    "title": "税务申报",
    "renderer": {
      "dll": [
        "immutable",
        "puppeteer-core"
      ]
    }
  }