电子锻造与反应？答案

【问题标题】：Electron Forge with react?电子锻造与反应？
【发布时间】：2020-10-10 20:31:23
【问题描述】：

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

【问题讨论】：

这有帮助吗？ ankitbko.github.io/2019/08/…
好吧，我不想不用打字稿，我想通了。

【解决方案1】：

我想通了，

    yarn create electron-app test --template=webpack
    cd test

然后我安装了 babel：

    yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --d

并做出反应：

    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>

【讨论】：

我遵循了您的代码并且它有效。但是，当我添加子组件并导入时（即从“./test”导入测试；除非我添加“.jsx”，否则它不会解析模块。你有同样的问题吗？
@Greg 我遇到了同样的问题。您是否找到了相同的解决方案？
@SathishkumarRakkiasamy 和@Greg 无需使用js 而不是jsx。因为他已经验证了正则表达式模式/\.(js|jsx)$/。所以对所有反应文件使用js。并将webpack.rules.js 文件更改为renderer.js 而不是renderer.jsx。并且不要忘记每个反应组件文件的import React。否则不会显示。最好在您的 main.js 上打开 devtools mainWindow.webContents.openDevTools() 然后执行您的代码。我自己发现这个错误会更有帮助
使用 React-native-web 是否也采用相同的步骤？因为我在移动设备中有一个现有的 React-native-web。使用哪个

【解决方案2】：

1.使用创建Webpack模板

yarn create electron-app my-new-app --template=webpack && cd my-new-app

2.安装依赖

yarn add --dev @babel/core @babel/preset-react babel-loader

3.将以下内容添加到 webpack.rules.js

 {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },

4.添加 React 和 React-dom

yarn add react react-dom

更多详情请参考electron-forge文档

【讨论】：