Electron入门 01：快速入门

自从HTML5、CSS3、ES6这些标准加入后，前端做不管是做界面还是做功能都越来越强大、越来越方便了。通常来说前端应用只能运行在浏览器中，无法当作独立的桌面或移动端应用使用，不过因为前端开发方便、开发人员多，现在已经有了很多可以将前端应用变为桌面或移动端应用的方法了，Electron就是其中一种方案。这篇文章将对Electron的入门使用做个说明。

Electron官方网站： https://www.electronjs.org/

Electron可以把前端项目打包成为桌面（Windows、macOS、Linxu）应用，比如Windows上 .exe 格式的程序。

Electron的实现思路很简单，既然网页可以在浏览器中运行，而浏览器是个原生的应用程序，那只要把浏览器和网页打包在一起，前端应用就也可以成为原生应用了。Electron使用了谷歌的Chromium浏览器，打包后的前端应用其实就是运行在Chromium上而已。

Electron这种方式带来一个好处，因为Chromium是个原生应用，它可以和操作系统进行交互，调用操作系统的资源，所以Electron中的前端应用也就变相的可以进行这些操作了，比如读写文件、操作网络、使用TCP/UDP等等功能。

Electron这种方式还有一个隐藏的好处，因为浏览器是确定的，开发前端应用的时候就不容考虑兼容性问题了。

Electron也有缺点，那就是打包出来的应用容量大，100MB起步，毕竟打包了个浏览器。还有就是性能差，浏览器上开网页性能也就这样了。

Electron使用非常简单，官方文档写的也很详细，并且提供了中文版本的：https://www.electronjs.org/zh/docs/latest/

这里写 Electron入门 文章主要依照官方文档做个记录，并在此基础上对一些内容做个补充。

Electron项目是基于Node.js的，所以需要安装Node.js环境并了解一些Node.js使用知识，可以参考下面文章： 《Node.js入门 01：基础使用与说明》https://blog.csdn.net/Naisu_kun/article/details/120665042 《Node.js入门 02：包管理器npm》https://blog.csdn.net/Naisu_kun/article/details/120663782 《Node.js入门 03：模块化规范 CommonJS 与 ES Module》https://blog.csdn.net/Naisu_kun/article/details/120663822

另外编写调试程序什么的最好有个趁手的编辑器，比如 Visual Studio Code ，顺带一提这个软件就是用Electron开发的。

Electron的开发和版本有挺大的关联，不同版本下很多内容可能有较大差异，