Electron Forge с реакцией? - PullRequest
Новая
       35

Electron Forge с реакцией?

4 голосов
/ 20 июня 2020

Есть ли простой способ настроить приложение с помощью Electron-Forge и React? Я использую шаблон webpack, но не знаю, что делать, чтобы jsx заработал. У меня есть реагирующий материал в рендерере. js

1 Ответ

3 голосов
/ 21 июня 2020

Я понял это, 

    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

Создал .babelr c в проекте root со следующим кодом: 

    {"presets": ["@babel/preset-env", "@babel/preset-react"]}

и добавил следующее в webpack.rules. js: 

    {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  }

изменено средство визуализации. 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>
...