nodejs中,除了最常用的fs之外,还有个很常用的路径相关变量和函数。在本文中,苏南大叔带来的是下面的两个路径相关的变量,分别是:__dirname__static。通过试验对比,可以学习到这两个变量的区别及控制方法。

对比理解 electron 中的常量 __dirname 和 __static - electron-dirname-static
对比理解 electron 中的常量 __dirname 和 __static(图6-1)

本文的范例为:electron-quick-startelectron-vue/my-project这两个入门范例。讲述的是:__dirname__static的事情,测试系统环境为:mac

__dirname__static 的变化

  • __dirnamenode自带的变量,表示当前js(一般来说是主进程main.js)的所在目录。那么对于同样的主进程中的__dirname,在普通的electron-quick-startelectron-vue/my-project中,究竟有什么样的变化呢?
  • __staticelectron-vue提出的自定义变量,在普通的electron项目中是不存在的。

下面的是个苏南大叔总结的对比表格:

quick-startelectron-vue(调试)electron-vue(build/asar)
__dirname所在目录的绝对地址相对项目根目录:src/mainasar的绝对地址/dist/electron/
__staticundefined相对项目根目录:staticasar的绝对地址/dist/electron/static/

可能还不是很明白的读者,可以继续查看下面的对比案例。

普通的electron程序

在普通的electron程序quick-start中,项目根目录下面的/main.js中。得到的__dirname为绝对路径,是main.js所在的目录。__static为未定义变量,会报错。

__dirname/code/electron/electron-quick-start-master
__staticundefined

对比理解 electron 中的常量 __dirname 和 __static - electron-quick-dirname
对比理解 electron 中的常量 __dirname 和 __static(图6-2)

调试版的electron-vue

在调试版的electron-vue中,程序对于__dirname__static进行了特殊处理,得到的都是相对源码根目录的相对地址。

__dirnamesrc/main
__static/code/electron/my-project/static
__staticelectron-vue下是绝对路径!

对比理解 electron 中的常量 __dirname 和 __static - electron-vue-filepath
对比理解 electron 中的常量 __dirname 和 __static(图6-3)

electron-vue成品:mac下的dmg文件

在生成dmgelectron-vue成品中,__dirname__static都恢复了正常的绝对路径模式。正常情况下来说,如果asar模式启用的话,得到的路径如下:

__dirname<app.asar>/dist/electron
__static<app.asar>/dist/electron/static

mac环境下,<app.asar>路径类似为:
/code/electron/my-project/build/my-project.app/Contents/Resources/app.asar

win环境下,<app.asar>路径类似为:
C:\Users\sunan\AppData\Local\Programs\my-project\resources\app.asar

值得说明的就是:/dist/electron这个路径是新增加的概念。

对比理解 electron 中的常量 __dirname 和 __static - vue-build-dirname
对比理解 electron 中的常量 __dirname 和 __static(图6-4)

electron-vue中的特殊处理点

__dirname这个异常的变量处理来自于webpack功能,文件设置为:.electron-vue/webpack.main.config.js中的node.__dirname节点。

对比理解 electron 中的常量 __dirname 和 __static - electron-vue-webpack-dirname
对比理解 electron 中的常量 __dirname 和 __static(图6-5)

__static这个新增变量也来自于webpack功能,设置为:.electron-vue/webpack.main.config.js.electron-vue/webpack.render.config.js中的webpack.DefinePlugin功能。

对比理解 electron 中的常量 __dirname 和 __static - webpack-define
对比理解 electron 中的常量 __dirname 和 __static(图6-6)

总结

路径对比完毕,那么涉及到这些路径的时候,就需要使用path.join或者path.resolve来进行处理了。这一条是下一篇文章中,苏南大叔将要和大家讨论的话题,敬请期待:

而关于electron-vue中,使用webpack做的特殊设置,也请期待苏南大叔的后续webpack系列文章:

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

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

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

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