gpt4 book ai didi

javascript - 电子锻造与 react ?

转载 作者:行者123 更新时间:2023-12-01 15:37:08 25 4
gpt4 key购买 nike

有什么简单的方法可以使用 Electron-Forge 和 React 设置应用程序吗?我正在使用 webpack 模板,但不知道如何让 jsx 工作。我在 renderer.js 中有反应的东西

最佳答案

我想到了,

    yarn create electron-app test --template=webpack
cd test
然后我安装了 babel:
    yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --d
并使用react:
    yarn add react react-dom
使用以下代码在项目根目录中创建了一个 .babelrc:
    {"presets": ["@babel/preset-env", "@babel/preset-react"]}
并将以下内容添加到 webpack.rules.js 中:
    {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
将 renderer.js 更改为 renderer.jsx 并更改 package.json 中的内容:
    "@electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.js",
"name": "main_window"
}
]
}
}
对此:
    "@electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.jsx",
"name": "main_window"
}
]
}
}
最后用这个替换了renderer.jsx:
    import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
console.log('Loaded React.');
ReactDOM.render(<div>Test.</div>, document.getElementById('root'));
并将 index.html 替换为:
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>

</head>
<body>
<div id="root"></div>
</body>
</html>

关于javascript - 电子锻造与 react ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62489701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com