自动重新加载在 React、Express Webpack 和 Electron 上所做的更改

Question

我刚刚实现了用于编译 Reactjs、Express 和 tailwindscss 的 babel、webpack 和 postcss，并用 Electron 对其进行了包装。一切都很好，但我想构建一个脚本，让我可以显示对电子的反应所做的更改。发生的第一件事是从 Reactjs 编译所有内容，然后只有我们运行 electron 来显示更改。我之前已经将 nodemon 作为观察者添加到快速服务器，但我最近将其删除并计划稍后尝试，任何建议或帮助将不胜感激，因为我觉得需要放置某种观察者而且我不不知道从哪里开始？

Package.json

  "scripts": {
    "electron": "electron .",
    "build": "webpack --mode production",
    "start": "npm run build && node src/server/index.js",
    "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
    "server": "nodemon src/server/index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\" \"npm run electron-dev\""
  },

Webpack 配置

const path = require('path')
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const outputDirectory = 'dist'

module.exports = {
    entry: ['babel-polyfill', './src/client/index.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                },
                'postcss-loader'
            ]
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: {
          '/': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'public', 'index.html'),
            filename: './index.html'
        })
    ]
}

或者是否可以利用从 reactjs 启动的开发服务器并将其实现到 electron 而不是使用 __driname 加载文件 index.html 文件？这是我的电子文件。

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
const startServer = require('../src/server/index');

const createWindow = () => {
    startServer();
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1500,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, '../dist/index.html')
  }))

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 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.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Html (bundle.js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reducted</title>
</head>
<body>
    <div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

Answer 1

所以我最后回答了我自己的问题所以我会把它留在这里

电子主

已更改

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html')
}))

至

mainWindow.loadURL('http://localhost:3000/index.html')

自动重新加载在 React、Express Webpack 和 Electron 上所做的更改

Auto reload changes made on React, Express Webpack with Electron

webpack

electron

Package.json

Webpack 配置

Html (bundle.js)

电子主