Установите следующие зависимости:
npm i webpack webpack-cli html-webpack-plugin html-loader @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
создайте .babelr c с:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
создайте webpack.config. js с:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "",//Your location to index.html which react renders to
filename: "./index.html" //Output file name
})
]
};
Создание индекса. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
После этого создайте базовое c приложение реакции.
Также создайте индекс. js в той же папке, что и index. html и добавьте эту строку в index. js:
import Form from ""; //Location to react app
Добавьте следующий скрипт в пакет. json:
"scripts": {
"build": "webpack --mode production"
}
Наконец выполните эту строку и Ваш скомпилированный код будет в папке dist:
npm run build
Теперь, чтобы добавить к электрону, вы можете изменить пути в соответствии с вашим электронным проектом и указать индекс. html в главном электроне. js на один в папке dist.
Кроме того, при использовании электрона используйте веб-пакет для запуска только папки sr c, а не снаружи. Держите электронные js скрипты подальше от веб-пакета.