项目地址

之前有发过一个的简单模板,写起来很舒服.考虑到以后的需要,先把它接入到electron,供备用!

先来讲一下一些差异点:

• webpack配置target为electron-renderer(否则热更新之类的功能会出问题)

• 启动本地调试服务器时不打开浏览器

• 开发环境electron loadURL打开localhost(视为远程地址),生产环境为本地文件

• 控制面板的切换

具体实现

• webpack配置target的方法(与plugin同级)

  plugins: [], target: 'electron-renderer'

• 修改build/dev-server.js

  // if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {   // opn(uri) // }

  实现不自动打开浏览器

• 这个项目是我copy electron的quick starter下来改的, 直接修改main.js(不使用ts)

  const path = require('path')   const url = require('url')   const { app, BrowserWindow, ipcMain } = require('electron')   const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')      // Keep a global reference of the window object, if you don't, the window will   // be closed automatically when the JavaScript object is garbage collected.   let mainWindow      function createWindow () {     // Create the browser window.     mainWindow = new BrowserWindow({width: 1000, height: 800})        if (process.env.NODE_ENV !== 'production') {       mainWindow.webContents.openDevTools()       installExtension(REACT_DEVELOPER_TOOLS)       .then((name) => {         console.log(`Added Extension:  ${name}`)         mainWindow.loadURL("http://localhost:3333")       })       .catch((err) => console.log('An error occurred: ', err))     } else {       mainWindow.loadURL(url.format({         pathname: path.join(__dirname, './index.html'),         protocol: 'file:',         slashes: true       }));     }        // Emitted when the window is closed.     mainWindow.on('closed', function () {       // Dereference the window object, usually you would store windows       // in an array if your app supports multi windows, this is the time       // when you should delete the corresponding element.       mainWindow = null     })   }      // This method will be called when Electron has finished   // initialization and is ready to create browser windows.   // Some APIs can only be used after this event occurs.   app.on('ready', createWindow)      // Quit when all windows are closed.   app.on('window-all-closed', function () {     // On OS X it is common for applications and their menu bar     // to stay active until the user quits explicitly with Cmd + Q     app.quit()   })      app.on('activate', function () {     // On OS X 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 (mainWindow === null) {       createWindow()     }   })      // 控制调试面板   ipcMain.on('toggle-devtool', (event, args) => {     mainWindow.webContents.toggleDevTools()   })

  安装electron-devtools-installer(非必须)

  调用调试面板的方法参考项目中的

对现阶段来说, 这个工程算是可以满足到自己了,最重要的是每一次都能学习到好多东西,有需要的朋友们可以参考,也希望能获取更多的意见和建议, 谢谢