自动重新加载对 React 所做的更改，使用 Electron 的 Express Webpack
Posted
技术标签:
【中文标题】自动重新加载对 React 所做的更改，使用 Electron 的 Express Webpack【英文标题】：Auto reload changes made on React, Express Webpack with Electron 【发布时间】：2022-01-17 08:24:13 【问题描述】：我刚刚完成了用于编译 Reactjs、Express 和 tailwindscss 的 babel、webpack 和 postcss 并用 Electron 封装了它。一切都很好，但我想构建一个脚本，让我可以显示对电子的反应所做的更改。发生的第一件事是从 Reactjs 编译所有内容，然后我们只运行 electron 来显示更改。我之前已将 nodemon 作为观察者添加到快速服务器，但我最近将其删除并计划稍后尝试，任何建议或帮助将不胜感激，因为我觉得需要放置某种观察者，我不不知道从哪里开始？
包.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 启动的开发服务器并将其实现到电子而不是使用 __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>
【问题讨论】：
【参考方案1】：所以我最终回答了我自己的问题，所以我将把它留在这里
电子主干
改变了
mainWindow.loadURL(url.format(
pathname: path.join(__dirname, '../dist/index.html')
))
到
mainWindow.loadURL('http://localhost:3000/index.html')
【讨论】：
以上是关于自动重新加载对 React 所做的更改，使用 Electron 的 Express Webpack的主要内容，如果未能解决你的问题，请参考以下文章
如何保存对 Python 列表所做的更改，以便在重新运行脚本后更新？ [复制]
不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的表进行了更改或启用了“阻止保存要求重新创建表的更改”选项
SQL Server 不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的表进行了更改或启用了“阻止保存要求重新创建表的更改”选项
不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的表进行了更改或者启用了“阻止保存要求重新创建表的更改“选项。