个人中心
gpt4 book ai didi

reactjs - 无需Webpack-dev-server即可手动设置对 Electron 的 react

转载 作者：行者123 更新时间：2023-12-03 12:40:56 28 4
gpt4 key购买 nike

我正在尝试为我的 Electron 应用设置 react 。

我的主要目的是在不使用任何开发服务器的情况下使用 Electron 中的 native react 。

与 Electron 应用程序一起使用开发服务器只会产生比以前更多的问题。

我将使用Webpack设置 react ，但不应创建任何开发服务器。
我只在没有webpack的情况下尝试了bable，但似乎功能较少。

在开发和构建最终的 Electron 应用程序期间，我还必须如何将 Electron 与编译后的 react 一起使用。

最佳答案

安装以下依赖项:

npm i webpack webpack-cli html-webpack-plugin html-loader @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

用以下命令创建一个.babelrc文件: 
{
  "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
    })
  ]
};

创建一个index.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>

然后创建一个基本的 react 应用程序。

还要在与index.html相同的文件夹中创建一个index.js并将此行添加到index.js中: 
import Form from ""; //Location to react app

将以下脚本添加到package.json: 
"scripts": {
  "build": "webpack --mode production"
}

最后执行此行，编译后的代码将在dist文件夹中: 
npm run build

现在，要添加到 Electron 中，您可以根据 Electron 项目更改路径，并将Electron的main.js中的index.html指向dist文件夹中的那个。

另外，在使用 Electron 时，请使用webpack仅执行src文件夹，而不在外部执行。
保持 Electron js脚本远离Webpack。

关于reactjs - 无需Webpack-dev-server即可手动设置对 Electron 的 react ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61073194/

28 4 0
文章推荐： xcode6 - 在Xcode 6上安装iOS 6模拟器
文章推荐： javascript - Chrome 扩展程序文本字段输入检查
文章推荐： tensorflow - TensorFlow 1.8 中的自定义日志处理程序
文章推荐： javascript - 从 onMarkerClick 打开不同的模态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com