最近要使用 Electron 来构建 React 项目,突然发现之前的 Demo 已经不能正常运行了,有些感概技术发展的迅猛。
如果你还不了解 Electron
,可以看我之前的文章:初探 Electron - 理论篇,理论知识没有变。如果你想了解 Electron5.0
版本如何构建 React
项目,不妨继续看本文。
需要注意:网上流传的 1.0 版本的项目应该已经启动不了了。
一、为什么要写此文
之前研究的时候,Electron
还是 1.0
版本,因此写了一系列的文章。
经过本次尝试,发现 5.0
版本有了更多的变化,所以不想误人子弟,索性更新此系列文章。
这次起手,我们就来构建一个 React 项目。
二、创建 React 项目
1.首先,全局安装 cli
:
1 |
npm install --global create-react-app |
2.创建项目
1 |
create-react-app electron5-react-demo |
3.启动
1 |
cd electron5-react-demo && yarn start |
4.访问 http://localhost:3000/
如果看到如下页面,说明你的 React
项目已经成功启动了。
三、集成 Electron 环境
1.首先需要安装 Electron
和 Electron-builder
1 |
yarn add electron electron-builder --dev |
2.增加相应开发工具
1 |
yarn add wait-on concurrently --dev |
3.项目根目录下新建文件:electron.js
1 |