如何使用React构建电子桌面应用程序[初学者]

最新推荐文章于 2024-05-15 09:44:40 发布

dfsgwe1231

最新推荐文章于 2024-05-15 09:44:40 发布

阅读量524

点赞数

文章标签： javascript json webpack ViewUI

介绍

我一直对编写桌面应用程序有浓厚的兴趣。这些年来一直困扰着我的是，我对学习C ++或Java使其不再感兴趣。我想用Javascript构建桌面应用程序，因此我着手了由Github开发和维护的Java桌面应用程序框架Electron。

Electron非常重要，它使您可以使用单个代码库为所有主要操作系统创建桌面应用程序。那给我留下了深刻的印象，但印象不太多，因为您可以使用React，Angular，Vue或任何JavaScript框架编写桌面应用程序。他们卖了我。

在本教程中，我将概述初始设置以帮助您入门。

先决条件

要了解本教程的语法和概念，您应该具有：

Javascript和React的基本概念
ES5和ES6标准的书面Javascript
二手节点软件包管理器（npm）
安装了Nodejs和npm / yarn

开始吧

让我们创建一个文件夹来容纳电子应用程序并将其更改为目录。

$ mkdir electron_react_app && cd $_

使用CRA（create-react-app）cli为我们生成一个反应代码库

$ npx create-react-app .

由于我们使用电子，因此将在整个教程中添加相关的依赖项。

$ yarn add electron electron-builder wait -on concurrently -D

electron -允许我们使用电子框架。
electron-builder -允许我们将电子应用构建为可执行文件。
wait-on -让您在开发过程中等待反应进行编译，以便使用电子进行渲染。
concurrently -允许我们同时运行反应和电子。
```
$ yarn add electron-is-dev
```

electron-is-dev告诉电子我们正在努力确定当前环境以服务于构建还是使react app在dev环境上运行。

在公用文件夹中创建一个electron.js文件，以容纳我们的电子逻辑。

// public/electron.js
const electron = require ( "electron" );
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require ( "path" );
const isDev = require ( "electron-is-dev" );

let mainWindow;

function createWindow ( )  {
  // Define the applications dimension
  mainWindow = new BrowserWindow({ width : 900 , height : 680 });
  // Determine what to render based on environment
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file:// ${path.join(__dirname, "../build/index.html" )} `
  );
  
  // Show chrome developer tools when in dev environment
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
  // Create event to close window on close
  mainWindow.on( "closed" , () => (mainWindow = null ));
}

// On launch create app window
app.on( "ready" , createWindow);
app.on( "window-all-closed" , () => {
    // Based on which operating system you are using
  if (process.platform !== "linux" ) {
      // If os not linux, close the app
      // you can add darwin(mac os), win64 and so many more
    app.quit();
  }
});

app.on( "activate" , () => {
  if (mainWindow !== null ) {
    createWindow();
  }
});

接下来，我们将向package.json脚本标签添加命令以同时运行react和electronic。

"electron-dev" : "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

该脚本将等待，直到CRA编译react应用，然后启动electronic应用。

同样，要启动电子应用程序，您还必须指出电子逻辑代码所在的位置。我们将在package.json通过添加main值来实现。

"main" : "public/electron.js"

让我们运行我们的应用程序。

$ yarn electron-dev

您应该看到这个。

对于以前使用过react的人，您应该想知道为什么没有打开浏览器上的新选项卡，这是因为我们在运行electron-dev定义的环境BROWSER=none 。

现在，如果您需要像我一样访问fs模块，您将很快遇到“找不到模块”错误。更多信息在这里。

幸运的是，可以通过使用electron-renderer作为Webpack目标来解决。您无需在React代码中进行任何其他更改，而是使用名为Rescripts的第三方库

让我们安装库

$ yarn add @rescripts/cli  @rescripts/rescript-env -D

我们还必须更改package.json文件中的脚本标签package.json

从

"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test" ,

至

"start" : "rescripts start" ,
"build" : "rescripts build" ,
"test" : "rescripts test" ,

接下来，在您的根文件夹中添加.rescriptsrc.js文件，并在下面添加以下行

module .exports = [ require .resolve( './.webpack.config.js' )]

我们绝对需要创建.webpack.config.js文件，以避免导入错误。

module .exports = config => {
  config.target = 'electron-renderer' ;
  return config;
}

现在你的fs担心的了。

打包应用

要打包我们的应用程序，我们需要几个依赖项。

yarn add electron-builder typescript -D

electron-builder -打包应用程序及其所有依赖项。
typescript - electron-builder取决于打字稿

注意：您不会编写任何打字稿，并且我不会敦促您使用它。

我们需要定义首页路线，因为当反应建立时，它使用绝对路径，而电子则没有绝对路径。您可以在package.json文件中通过添加homepage属性来更改此设置。

"homepage" : "./" ,

接下来，添加一个electronic-pack命令，它将打包我们的构建。

将以下内容添加到package.json scripts标记中

"postinstall" : "electron-builder" ,
"preelectron-pack" : "yarn build" ,
"electron-pack" : "build -mw"

postinstall -将确保您的依赖项始终与电子版本匹配
preelectron-pack将构建react应用
electron-pack为您选择的操作系统打包应用程序。

在执行任何操作之前，我们将必须配置Electron builder。

将以下内容添加到您的package.json文件中。

"author" : {
  "name" : "Your Name" ,
  "email" : "your.email@domain.com" ,
  "url" : "https://your-website.com"
},
"build" : {
  "appId" : "com.my-website.my-app" ,
  "productName" : "MyApp" ,
  "copyright" : "Copyright © 2019 ${author}" ,
  "mac" : {
    "category" : "public.app-category.utilities"
  },
  "files" : [
    "build/**/*" ,
    "node_modules/**/*"
  ],
  "directories" : {
    "buildResources" : "assets"
  }
}

您的package.json文件应如下所示。

{
  "name" : "my-app" ,
  "description" : "Electron + Create React App + Electron Builder" ,
  "version" : "0.1.0" ,
  "private" : true ,
  "author" : {
    "name" : "Your Name" ,
    "email" : "your.email@domain.com" ,
    "url" : "https://your-website.com"
  },
  "build" : {
    "appId" : "com.my-website.my-app" ,
    "productName" : "MyApp" ,
    "copyright" : "Copyright © 2019 ${author}" ,
    "mac" : {
      "category" : "public.app-category.utilities"
    },
    "files" : [
      "build/**/*" ,
      "node_modules/**/*"
    ],
    "directories" : {
      "buildResources" : "assets"
    }
  },
  "dependencies" : {
    "electron-is-dev" : "^1.0.1" ,
    "react" : "^16.8.3" ,
    "react-dom" : "^16.8.3" ,
    "react-scripts" : "2.1.5"
  },
  "homepage" : "./" ,
  "main" : "public/electron.js" ,
  "scripts" : {
    "start" : "rescripts start" ,
    "build" : "rescripts build" ,
    "test" : "rescripts test" ,
    "eject" : "react-scripts eject" ,
    "electron-dev" : "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"" ,
    "postinstall" : "electron-builder" ,
    "preelectron-pack" : "yarn build" ,
    "electron-pack" : "build -mw"
  },
  "eslintConfig" : {
    "extends" : "react-app"
  },
  "browserslist" : [
    ">0.2%" ,
    "not dead" ,
    "not ie <= 11" ,
    "not op_mini all"
  ],
  "devDependencies" : {
    "@rescripts/cli" : "^0.0.10" ,
    "@rescripts/rescript-env" : "^0.0.5" ,
    "concurrently" : "^4.1.0" ,
    "electron" : "^4.0.6" ,
    "electron-builder" : "^20.38.5" ,
    "typescript" : "^3.3.3333" ,
    "wait-on" : "^3.2.0"
  }
}

您还需要创建一个名为assets的目录，在其中添加应用程序图标。在此处查看这些图标的格式。

现在您可以打包您的应用了

$ yarn electron-pack

背景内容

如果您碰巧在Linux上遇到这样的错误。

[2720:0425/142001.775056:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I 'm aborting now. You need to make sure that /home/<name>/src/ssbc/patchwork/node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.

您可以通过添加此命令来解决该问题。

确保您在项目目录中

$ sudo chown root node_modules/electron/dist/chrome-sandbox

然后

$ sudo chmod 4755 node_modules/electron/dist/chrome-sandbox

您的Linux软件包应用程序默认情况下具有.Appimage扩展名，因此不会自动.Appimage 。您将不得不使其可执行。

确保您位于dist文件夹中

您可以通过以下方式进行操作：

$ chmod a+x '<You app>.AppImage'

然后运行

$ ./ < You app > .AppImage

如果再次遇到4755错误，请使用以下命令：

$ sudo chown root '<Your appname>.AppImage'

然后

$ sudo chmod 4755 '<Your appname>.AppImage'

然后尝试再次运行它。

您也可以根据自己喜欢的类型来构建Linux应用程序，例如Debian。

Debian 在这里

跟进

如有疑问请发表评论
在Twitter上关注我@wachira_dev
在这里回购

From: https://hackernoon.com/how-to-build-electron-apps-with-react-6q6s3789

dfsgwe1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用React构建电子桌面应用程序[初学者]

介绍我一直对编写桌面应用程序有浓厚的兴趣。这些年来一直困扰着我的是，我对学习C ++或Java使其不再感兴趣。我想用Javascript构建桌面应用程序，因此我着手了由Github开发和维护的Java桌面应用程序框架Electron。 Electron非常重要，它使您可以使用单个代码库为所有主要操作系统创建桌面应用程序。那给我留下了深刻的印象，但印象不太多，因为您可以使用React，...
复制链接

扫一扫