什么是 create-electron-react-app
create-electron-react-app 是一个基于 Electron 和 React 的开发环境快速搭建工具，可快速创建一个基于 Electron 和 React 的应用程序。
相较于其他工具，它的特点在于全自动化生成项目所需配置，完善的 webpack 配置，主线程与渲染线程的互相通信等。在项目的结构上，它默认使用了优秀的开发实践，并提供了一组常规的工具和库内置到开发环境中，使得开发者能够专注于业务逻辑开发，而不必担心技术栈和开发环境等细节问题。
create-electron-react-app 是基于 create-react-app 的封装，借助于它的自动化配置和较完善的打包流程，将开发周期和开发成本降至最低。
此 NPM 包的使用教程，将带你快速学习使用 create-electron-react-app，从零开始搭建一个 Electron+React 开发环境。
安装 create-electron-react-app
使用 npm 包管理工具来安装 create-electron-react-app：
npm install -g create-electron-react-app
使用 create-electron-react-app 创建项目
首先，创建一个项目目录：
mkdir your-project-name cd your-project-name
然后，利用 create-electron-react-app 创建一个基础的 Electron+React 项目：
create-electron-react-app .
命令中的“.”表示在当前目录下创建项目，执行后命令行界面显示出项目创建的过程。在第一次运行时会向你询问一些问题，可以根据需要进行选择。
安装依赖包：
npm install
如果你没有设置 npm 镜像的话，可能会下载的很慢。你可以将 npm 镜像源切换为阿里云的源，提高 package 的下载速度。
npm config set registry https://registry.npm.taobao.org
安装完成后，使用以下命令启动你的项目：
npm start
然后你会看到你的开发环境已经启动了。create-electron-react-app 会为我们自动打开一个 Electron 窗口，并显示 React 的“Welcome to React”页面。
项目结构
每个 create-electron-react-app 创建的项目都有一个相同的目录结构，包含如下文件和文件夹：
- public/：Web 应用的静态资源目录，例如 HTML 或样式表文件。
- src/：应用的 JavaScript 代码，包含可供 React 渲染的组件和其他代码。
- package.json：有关项目的元数据和脚本命令的 JSON 文件（例如 npm start 和 npm run build）。
主线程和渲染线程
create-electron-react-app 提供了两个线程：主线程和渲染线程。
- 主线程：处理所有 Electron 特定的功能并控制应用程序的生命周期。它还负责与页面中的渲染线程通信。
- 渲染线程：运行 HTML、CSS 和 JavaScript，渲染应用程序的界面。
你需要将你的应用拆分成一个主线程和多个渲染线程。主线程文件是在 src/main/ 目录下创建。默认情况下，它包含一个最小的主线程，可以启动应用程序并创建一个基础的 Electron 窗口。
渲染线程代码是在 src/renderer/ 目录下创建的。它是一个常规的 React 应用程序，与你看到的任何其他 React 应用程序没什么区别。
构建应用程序
有多种方式可以构建应用程序，具体取决于你的需求和偏好。
调试和开发
你可以使用以下命令来启动开发版本的应用程序：
npm start
简单粗暴，方便开发人员来测试和观测开发过程。
生产构建
当你准备将应用程序的源码构建为静态文件时，使用以下命令：
npm run build
构建完成后，你会在 build 目录下找到构建后的应用程序。
自动构建
如果你决定经常构建应用程序或如果你希望在应用程序中使用不同类型的构建，那么需要进行自动构建。这里推荐两个不错的工具：
- Travis CI
- Jenkins
其中，Travis CI 是一个完全免费的持续集成服务。Jenkins 是一个选项更丰富的构建服务器，支持自定义构建过程和编排，缺点是需要自己承担服务器管理和部署和维护费用等。
示例代码
以下是一个简单的应用程序，以示例代码，用于说明 create-electron-react-app 的主要用法。
在当前的项目文件夹中的 src 文件夹中创建一个新文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
---- -------------- -------------------- ---------- --
---
-----
----
--
--------------------
------------------------
---------------
------------- -----------
-
-----------
----
---------
------
--
-
------ ------- ----App.css 文件中的样式将在加载时应用到 React 应用程序中。
然后返回 src/index.js 文件，更新文件中的代码，以便加载新创建的组件，并设置其他应用程序设置：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
------ --- ---- --------
------ - -- ------------- ---- ------------------
----------------
------------------
---- --
--------------------
-------------------------------
--
---------------------------如果你现在运行：
npm start
你将在应用程序窗口中看到相应的输出。
总结
create-electron-react-app 是一个基于 Electron 和 React 的应用程序快速开发工具，可以让开发者专注于业务逻辑的开发，而不必担心技术栈和开发环境等细节问题。通过本文，你已经学习了使用 create-electron-react-app 进行快速的 Electron+React 开发环境的搭建，和应用程序的构建。这将帮助你更快更好地开发出有着良好体验和丰富功能的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdc81e8991b448e68c9