苏南大叔带着大家练习的electron-quick-start项目,在本篇文章中,苏南大叔将要对这个项目进行一下目录调整,使之看起来代码结构更清晰一些。

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - electron-modify
electron-quick-start 项目,如何改造目录结构并打包(图8-1)

当然,为了证明electron-quick-start项目经过目录调整之后,还能继续使用,苏南大叔进行了打包实验。这就是本篇文章的主要内容,比较基础,大神们请飘过。

调整前后目录对比

代码下载:

调整前:

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 000
electron-quick-start 项目,如何改造目录结构并打包(图8-2)

改造后:

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 001
electron-quick-start 项目,如何改造目录结构并打包(图8-3)

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 002
electron-quick-start 项目,如何改造目录结构并打包(图8-4)

主要的调整点,就是:

  • 删除了根目录下面的md文件和.gitignore文件。
  • main.jsrenderer.jsindex.html三个放到了app目录下面,node_modules文件夹放类库。
  • dist目录,用于放置打包的作品。
  • 由于main.js文件移动了位置,苏南大叔需要修改package.json里面的main字段,新的值为:app/main.js

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 003
electron-quick-start 项目,如何改造目录结构并打包(图8-5)

测试是否可以正常使用

使用yarn安装依赖项目后,在项目根目录下面,利用electron-packager进行打包。命令如下:

electron-packager ./ app --out=dist

然后,在win10环境下,我们得到了个exe,成功顺利可以打开。

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 004
electron-quick-start 项目,如何改造目录结构并打包(图8-6)

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 005
electron-quick-start 项目,如何改造目录结构并打包(图8-7)

可能存在的问题

当然,如果苏南大叔在根目录下面使用的命令是这样的话:

electron-packager ./app --out=dist

那么也许会得到下面这个错误提示:

unable to find a vaild app

苏南大叔:electron-quick-start 项目,如何改造目录结构并打包 - 006
electron-quick-start 项目,如何改造目录结构并打包(图8-8)

两次打包命令,看起来基本一致。但是到底有什么区别,聪明的读者,你看出来了么?这个问题,很多新人会遇到哦,请仔细查看相关命令行区别。

结语

electron-packager执行的位置下,需要有个正确的package.json,该jsonmain字段,需要修正为真实的路径。

更多electron的实战文章,请点击苏南大叔的electron博文链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: