使用create-react-app 快速创建一个 Electron 桌面应用

2018-08-10 admin

Electron简介

React + Electron 搭建一个桌面应用

在 Electron 中, 把 package.json 中设定的 main 脚本的所在进程称为 主进程。

快速体验

# github上有一个 electron-quick-start 仓库克隆下来
git clone https://github.com/electron/electron-quick-start
# 进入文件夹
cd electron-quick-start
# 安装依赖包并运行
npm install && npm start

main.js 是你的启动文件,index.html 是你的入口文件

Electron 结合 React

创建一个React项目

使用create-react-app

# 安装 create-react-app 命令
npm install -g create-react-app
# 创建 react-electron1 项目
create-react-app react-electron1
# 启动项目
cd react-electron1 && yarn start

Electron 添加及配置

react-electron1项目添加electron

yarn add electron

配置 main.js

根目录react-electron1下新建main.js文件,参考electron-quick-start项目中的main.js文件

// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow

function createWindow () {
//创建浏览器窗口,宽高自定义
mainWindow = new BrowserWindow({width: 800, height: 600})

  /*
   * 加载应用-----  electron-quick-start中默认的加载入口
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  // 加载应用----适用于 react 项目
  mainWindow.loadURL('http://localhost:3000/');

  // 打开开发者工具,默认不打开
  // mainWindow.webContents.openDevTools()

  // 关闭window时触发下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
   // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
  if (mainWindow === null) {
    createWindow()
  }
})

// 你可以在这个脚本中续写或者使用require引入独立的js文件.

配置package.json文件

{
  "name": "react-electron1",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",//配置启动文件
  "homepage": ".",
  "dependencies": {
    "electron": "^2.0.7",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "startapp": "electron ."//配置electron的start,区别于web端的start
  }
}

注意

  • 添加main.js,主进程文件
  • "startapp": "electron ."运行electron app的脚本
  • "homepage": "."打包的时候,资源相对路径问题

运行项目

# 启动react项目,默认地址:http://localhost:3000/
yarn start

# 启动electron
yarn run startapp

遇到的问题

1.通过electron-quick-start项目拷过来的main.js中,加载入口文件时,代码如下:

mainWindow.loadFile('index.html')

修改为: mainWindow.loadURL('http://localhost:3000')

运行不起来,最后发现,是加载方法的问题,如果加载的是url,需要**loadURLelectron-quick-start项目的main.js中加载的是本地的资源,所以使用的是loadFile**

打包 electron

打包工具electron-builder

安装 electron-builder

yarn add electron-builder --dev

配置

修改 main.js 代码

+ const IS_DEV = process.env.NODE_ENV === 'development'

-  mainWindow.loadURL('http://localhost:3000')
+  // 加载应用
+  const staticIndexPath = path.join(__dirname, './index.html');
+  const main = IS_DEV ? `http://localhost:3000` : url.format({
+    pathname: staticIndexPath,
+    protocol: 'file:',
+    slashes: true
+  });
+  mainWindow.loadURL(main)

-  mainWindow.webContents.openDevTools()
+  IS_DEV && mainWindow.webContents.openDevTools()

修改package.json中的 script, 添加NODE_ENV 环境变量用于区分环境

- "startapp": "electron .",
+ "startapp": "NODE_ENV=development electron .",

修改package.json

由于 create-react-app 默认打包的路径为 / 根目录,而在 electron 中,需要使用相对路径所以需要再次次改package.json

  • 修改 name,verison,description,author字段
  • 在 ./public文件夹中放入 icon.png 文件
  • 将 main.js 重命名为 electron.js,让如根目录./public 目录下。同时修改 package.json
  • 由于electron-builder中不能使用dependencies,所以务必将所有的dependencies加入devDependencies。
  • 最终的 package.json文件:
{
  "name": "react-electron1",
  "version": "0.1.0",
  "description": "A Electron app with react.",
  "author": "dragonishare<dragonishare@gmail.com>",
- "main": "main.js",
+ "main": "./public/electron.js",
  "private": true,
  "homepage": "./",
-  "dependencies": {
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-scripts": "1.1.4"
-  },
+  "build": {
+    "mac": {
+      "category": "demo"
+    },
+    "files": [
+      {
+        "from": "./",
+        "to": "./",
+        "filter": [
+          "**/*",
+          "!node_modules"
+        ]
+      }
+    ],
+    "directories": {
+      "buildResources": "public"
+    }
+  },
  "scripts": {
    "startapp": "NODE_ENV=development electron .",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
+   "packager": "npm run build && rm -rf dist && electron-builder"
  },
  "devDependencies": {
    "electron": "^2.0.7",
    "electron-builder": "^20.27.1"
+   "react": "^16.4.2",
+   "react-dom": "^16.4.2",
+   "react-scripts": "1.1.4"
  }
}

之后运行npm run packager 即可得到 dmg 安装文件

参考地址

原文链接:https://segmentfault.com/a/1190000015958670

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37691.html

文章标题:使用create-react-app 快速创建一个 Electron 桌面应用

相关文章
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
Facebook发布React Native!
React.js Conf 2015会议上,Facebook发布了React Native。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React中,把一切东西都看成组件,而且所有组件...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
回到顶部