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

對現階段來講, 這個工程算是能夠知足到本身了,最重要的是每一次都能學習到好多東西,有須要的朋友們能夠參考,也但願能獲取更多的意見和建議, 謝謝