electron打包你的h5应用成桌面应用

electron 是什么？

官网解释为：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。可以看出，这个东西是为了让我们用 html,javaScript,css 开发的 web 应用和 h5 应用打包成一个桌面应用，比如说一个 exe 的安装包，或者一个 mac 的安装包。这样我们可以不用在浏览器打开我们的应用了。而且像腾讯 qq 一样直接运行。
大名鼎鼎的：VS code, facebook manager就是用这个神器开发打包的。

其他介绍

Web 技术

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

开源

Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

跨平台

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

如何安装

安装 electron 很简单，就像其他包一样，直接 npm 或者 yarn 安装：

npm i -D electron@latest

开发与打包 H5 应用

我们先安装官方提供的实例：

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ yarn install && yarn start

启动后，就发现启动了一个桌面应用：

打包该应用, 执行下面的命令：

npm install electron-packager --save-dev
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

命令说明：

• location of project：项目所在路径
• name of project：打包的项目名字
• platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux，可选值为：darwin,linux,mas,win32）
• architecture：决定了使用 x86 还是 x64 还是两个都用
• electron version：electron 的版本
• optional options：可选选项
  我们根据自己的项目还环境，把下面的命令添加到 package.json 的script节点下：

"packager": "electron-packager ./ fristProject --platform=win32 --arch=ia32 --out ./outApp --electron-version 1.4.0 --overwrite"

第一次打包比较慢，因为要下载编译文件，最好用 yarn 来执行 yarn packager 来打包。打包完成后，我们就得到了一个 exe 的执行文件。

这样我们就得到了一个 h5 开发的桌面应用了。下面我们介绍用 electron-vue 来开发和打包我们的聊天室程序。

electron-vue

安装

依次执行以下命令：

npm install -g vue-cli
vue init simulatedgreg/electron-vue ws-chat

按照上面的操作完成之后，yarn dev就能启动我们的开发环境了。

由于目录结构稍微有变化，我们可以将之前 vue-cli 的 src 目录里面的代码拷贝到 /src/renderer。然后将以前项目依赖的 npm 也合并到现在的package.json 里面，main.js也需要合并一下。就完成一个 vue-cli 项目向 electron-vue 项目迁移的工作了。
接下来我们打包我们的程序：

yarn build

打包过程如果没反应或者出错，可以参考这篇文章：
electron-vue 打包，使用 electron-builder 打包，简单方便
打包之后，运行：

完美！

总结

1. electron能将你的网页程序，打包成跨平台的桌面程序
2. 开发上，electron同时具备了网页浏览器的能力，也具有 nodeJs 的能力，可以说是将网页和 nodeJs 结合起来了，使得读写文件，访问数据库都能轻松实现，功能强大。
3. electron-vue能轻松将 vue-cli 脚手架搭建的项目进行迁移。
4. electron在使用过程中还是有很多坑的，特别是打包的时候，大家需要仔细参考官方文档。

个人感觉，学会了前端，就会了移动端 app(react-native，流应用, web view 混合应用)，h5 应用，web 应用，各种小程序，nodeJs 后台服务，跨平台桌面应用，甚至使用 cocos creater 开发游戏，微信小游戏排名靠前的大部分是用该平台开发的，使用的技术是 javaScript 配合 canvas 来实现的。所谓是无所不能。

相关阅读：

一文看懂 websocket
websocket 实现一个聊天室

参考文献：

官方网站
# Electron 快速入门及打包
# electron 打包出现 Error: Unresolved node modules: vue

学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。

个人公众号：