electron程序,如何理解常量__dirname和__static的区别?
发布于 作者:苏南大叔 来源:程序如此灵动~在nodejs
中,除了最常用的fs
之外,还有个很常用的路径相关变量和函数。在本文中,苏南大叔带来的是下面的两个路径相关的变量,分别是:__dirname
和__static
。通过试验对比,可以学习到这两个变量的区别及控制方法。
本文的范例为:electron-quick-start
和electron-vue/my-project
这两个入门范例。讲述的是:__dirname
、__static
的事情,测试系统环境为:mac
。
__dirname
及 __static
的变化
__dirname
是node
自带的变量,表示当前js
(一般来说是主进程main.js
)的所在目录。那么对于同样的主进程中的__dirname
,在普通的electron-quick-start
和electron-vue/my-project
中,究竟有什么样的变化呢?__static
是electron-vue
提出的自定义变量,在普通的electron
项目中是不存在的。
下面的是个苏南大叔总结的对比表格:
quick-start | electron-vue(调试) | electron-vue(build/asar) | |
---|---|---|---|
__dirname | 所在目录的绝对地址 | 相对项目根目录:src/main | asar的绝对地址/dist/electron/ |
__static | undefined | 相对项目根目录:static | asar的绝对地址/dist/electron/static/ |
可能还不是很明白的读者,可以继续查看下面的对比案例。
普通的electron
程序
在普通的electron
程序quick-start
中,项目根目录下面的/main.js
中。得到的__dirname
为绝对路径,是main.js
所在的目录。__static
为未定义变量,会报错。
__dirname | /code/electron/electron-quick-start-master |
__static | undefined |
调试版的electron-vue
在调试版的electron-vue
中,程序对于__dirname
和__static
进行了特殊处理,得到的都是相对源码根目录的相对地址。
__dirname | src/main |
__static | /code/electron/my-project/static |
__static
在electron-vue
下是绝对路径!
electron-vue
成品:mac
下的dmg
文件
在生成dmg
的electron-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-vue
中的特殊处理点
__dirname
这个异常的变量处理来自于webpack
功能,文件设置为:.electron-vue/webpack.main.config.js
中的node.__dirname
节点。
__static
这个新增变量也来自于webpack
功能,设置为:.electron-vue/webpack.main.config.js
和.electron-vue/webpack.render.config.js
中的webpack.DefinePlugin
功能。
总结
路径对比完毕,那么涉及到这些路径的时候,就需要使用path.join
或者path.resolve
来进行处理了。这一条是下一篇文章中,苏南大叔将要和大家讨论的话题,敬请期待:
而关于electron-vue
中,使用webpack
做的特殊设置,也请期待苏南大叔的后续webpack
系列文章:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。