使用 electron-react-boilerplate 创建 Electron 工程

2018-03-05

electron-react-boilerplate 是一个流行的 Electron-React 脚手架. 在本文中记录了如何使用它来创建一个 Electron-React 工程.

安装

项目主页在这里, clone 这个项目到本地:

git clone --depth=1 https://github.com/chentsulin/electron-react-boilerplate.git your-project-name

其中: your-project-name 表示在本地的目录名.

clone 完毕后, 进入项目目录, 执行下面命令, 安装依赖:

sudo yarn

如果在国内, 问题就变得有点复杂了, 因为 Electron 的安装方式有所不同.

Electron 的安装过程分为两步, 第一步它与普通的依赖一样通过 yarn 安装, 之后, 它有一个第二步 postInstall 的过程.

postInstall 的过程需要再次联网下载 Electron 的二进制, 如果在国内的话, 这个网址是访问不到的, 这会造成联网失败.

好消息是, 我们可以通过环境变量来改变这个下载地址, 通过以下代码:

sudo export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

如果是 Windows, 设置环境变量的方法如下:

set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

本文的安装环境为 macOS, 你会发现我上面 export 时使用了 sudo 提权, 这是为什么呢?

这是因为 Electron 的 postInstall 需要把二进制安装到 /etc 中, 因此我们必须要申请 root 权限.

如果顺利的话, 这样 Electron 就成功安装进项目的当中了.

执行以下命令来启动 APP:

yarn run dev

项目应会正常启动。

一个工程, 两个 package.json

在这个项目中有两个 package.json:

  1. ./package.json
  2. ./app/package.json

当我们添加一个 Module 时, 向其中哪一个添加呢? 规则如下:

  1. ./app/package.json: 用于添加原生 Module.
  2. ./package.json: 除了原生 Module 之外的都添加到这里.

具体参见这篇文章

导入 CSS 模块

如果需要向项目中导入全局 css 模块, 如 bootstrap 或者 semantic-ui, 需要向 .global.css 中添加:

@import "~bootstrap/dist/css/bootstrap.css";