前言：electron 可以让我们使用前端的技术栈来构建桌面应用程序，minimal-electron-react-app 是一个极简的 electron+react 模板项目，让我们可以快速的使用 electron + react 构建桌面应用程序。
安装和初始化
- 首先，安装 Node.js 和 npm，如果已经安装过，可以跳过这一步。
- 打开命令行工具，输入
npm install -g minimal-electron-react-app的命令，全局安装 minimal-electron-react-app。 - 进入你想要创建项目的目录，比如
cd /Users/yourname/Desktop。 - 运行
minimal-electron-react-app init your-app的命令，初始化 minimal-electron-react-app 项目。 - 进入新创建的项目目录，比如
cd your-app。 - 运行
npm start命令，启动项目，查看效果。
项目结构
minimal-electron-react-app 项目结构如下：
-- -------------------- ---- ------- --- ------ - --- ------- - --- --------------- - --- ---------- ----- ------------- - --- ---------------------------- - --- ----- - --- --------- - --- ---------- - --- -------- - --- ----- - --- -------- - --- ------------ --- ------------- --- ------------ --- ------- - --- ---------- --- ---- - --- -------- - --- ------ - --- ------- - --- ----------- - --- ----------- - --- --------- - --- ------- --- ----------------- --- ---------------------- --- --------------------------
- build/
- target/ 打包后的可执行文件或安装包
- dist/ 打包后的分发文件
- node_modules/ npm 安装的依赖
- public/ 静态资源，比如 index.html
- src/ 主要的源代码
- index.js Electron 应用入口文件
- App.js React 主应用文件，会渲染 Renderer.js 组件
- Main.js Electron 主进程文件
- Renderer.js Electron 渲染进程文件，会渲染 index.html 和 index.js
- webpack.config.js Webpack 的主要配置文件，用于指定项目的构建规则和各项参数
- webpack.main.config.js Webpack 针对主进程的配置文件
- webpack.renderer.config.js Webpack 针对渲染进程的配置文件
开发和调试
- 修改 src/Renderer.js 文件，来修改应用的前端内容。
- 如果需要修改主进程的逻辑，修改 src/Main.js 文件。
- 运行
npm start命令，启动项目，查看效果。 - 再打开一个命令行工具，用
npm run start:electron命令启动 electron 应用程序，调试应用程序。
打包与发布
- 在项目根目录下，运行
npm run build命令，编译出构建好的应用程序。 - 在构建成功后的目录，可以看到打出来的应用程序。可以通过手动打包成 .dmg、.exe 文件，使用程序文件 Safe In Cloud 6.10.1 Demo （https://safe-in-cloud-six.s3.eu-central-1.amazonaws.com/Safe+In+Cloud_6.10.1_x64_demo.exe）进行演示
安装DEMO之后，将 dist 目录下面的文件拷贝到软件的安装目录，就可以看到一个完整的 desktop application 了，如下图所示：
结语
如此简单的操作流程，让我们可以快速学习和接入 electron + react 技术栈，希望这篇文章对你有所帮助，感谢你的阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c6f81e8991b448ebe57