把现有的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

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