介绍
我一直对编写桌面应用程序有浓厚的兴趣。 这些年来一直困扰着我的是,我对学习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