10分钟把你的 Web 网页改造为 Electron App

前言

618在慕课网上淘了一个1元的Electron课程，一个基础的入门课，还不错，就想着把前些日子写的React+Typescript实现一个简单的豆瓣电影应用改造下，这次也是参考腾的来做。

搭建Electron环境

首先，我们需要安装Electron。您可以从Electron官方网站下载安装程序。安装完成后，您可以在终端中输入以下命令来创建一个新的Electron项目：

mkdir my-electron-app
cd my-electron-app
npm init -y

这将创建一个新的项目目录，并在其中初始化一个package.json文件。

接下来，我们需要安装Electron的依赖项。您可以使用以下命令来安装：

npm install electron

安装完成后，您就可以在package.json文件中看到electron被列为依赖项。

创建React项目

现在，我们需要创建一个React项目。您可以使用以下命令来创建：

npx create-react-app my-react-app

这将创建一个新的React项目目录，并在其中初始化一个package.json文件。

将React项目集成到Electron项目中

现在，我们需要将React项目集成到Electron项目中。您可以将React项目复制到Electron项目的src目录中。

cp -r my-react-app/src my-electron-app/src

复制完成后，您需要在Electron项目的package.json文件中添加以下脚本：

"scripts": {
  "start": "electron .",
  "build": "electron-builder"
}

运行Electron应用

现在，您可以使用以下命令来运行Electron应用：

npm start

这将启动Electron应用。您可以在浏览器中看到一个新的窗口，其中包含React应用。

打包Electron应用

当您对Electron应用满意时，您可以使用以下命令来打包应用：

npm run build

这将创建一个可以分发的Electron应用。您可以在dist目录中找到打包后的应用。

结语

以上就是如何使用Electron将您的Web网页改造为跨平台的桌面应用程序。希望本教程对您有所帮助。如果您有任何问题，请随时留言。