把现有的typesctipt+react项目接入到electron

项目地址 ts-react-electron

之前有发过一个typesctipt+react的简单模板,写起来很舒服.考虑到以后的需要,先把它接入到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(非必须)
调用调试面板的方法参考项目中的bingGlobalFunc.ts

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