3. 使用模板

一、前言

上一章我们已经从零开始完成了一个Electron软件项目的开发,可以明显看出来,非常的麻烦。

所以本章就是来简化这一步骤的:使用模板初始化项目。

二、初始化

使用的工具还是前文提到的那个打包工具,它是将Electron整个都集成在自己内部的。

因为前文我们最开始没有用这个打包工具,所以才需要后续自己添加。

并且添加完成之后,你会发现你的package.json文件也被改变的很多,同时多了一些其它的文件、文件夹。

而本文就是直接使用Electron Forge来初始化一个项目,官网可点击这里查看。

简单来说,你现在不需要再像前文那样做任何其它事情,只需要找一个你觉得合适的地方,运行以下这条命令即可:

npm init electron-app@latest my-app

最后的my-app是你这个项目的名字,可以任意取(最好用英文)。

然后你什么都不用干,等它初始化完就好了。

如果下载失败,那么你还是需要参考前文的方式,尝试将npm改为使用cnpm

默认情况下会生成以下这些东西:

image-20240213161455303

  • .git:这是git版本工具库保存数据的文件夹,默认隐藏,如果不懂git的请一定要自己学习一下,因为它非常的常见:git详解
  • node_modules:这个前文提到过,是用来保存我们下载后的包的,一般我们不用管。
  • src:存放源文件的,比如我们的代码,都会写在这个文件夹中,所以它是用的最多的。
  • .gitignore:git版本工具用的,用于忽略一些文件。
  • forge.config.js:从名字就能看出来,这个文件是Electron Forge的配置文件,正常情况下用的也比较少。
  • package.json:包管理文件(或者也可以称为项目管理文件),用于存放当前项目所有的相关信息,前文提到过。
  • yarn.lock:用来保存一些第三方包信息的,我们同样不用管。

总的来说,至少从前期学习来看,我们需要用到的其实就两个东西:

  • src文件夹,用于写代码的。
  • package.json文件,用于填写一些项目相关的内容的。

首先看package.json文件:

image-20240213161745641

main字段可以看出来,这里默认的入口文件为src文件夹下的index.js文件。

然后是下面的脚本,足足有5个了,而且后面的命令都是electron-forge的命令。

想要知道这些有什么用?最简单直接的方式就是都运行测试一下就知道了!

  1. npm run start:启动应用,主要作为调试、开发的,用的最多。
  2. npm run package:用于打包的,直接的来说,就是会生成文件夹out\*-win32-x64,通过点击里面的可执行文件,就可以直接执行代码了。
  3. npm run make:用于编译安装包的,直观的来说,就是会生成文件夹out\make下面的东西,同时其默认也会先运行上面的package,可以将其发送给其它人安装使用。
  4. npm run publish:用于分发的,它会先执行上面两个命令,然后再根据你的配置将编译好的安装包自动传输到相应的平台上供其他人下载安装,比如Github。

至于最后一个lint,没有什么含义,就是使用echo命令打印了一下文本。

三、代码解析

其默认在src文件夹中给我们生成了四个文件:

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux