renderer进程使用的是 https://github.com/GuoYuefei/simple_react_webpack 的第四次commit的模板
见 https://github.com/GuoYuefei/simple_react_webpack/blob/master/README.md
目录结构使用的是electron-build推荐的two package结构。但是结构本身加入了些我个人的理解。
两个package.json的分别是package.json 和 /app/package.json. 可以理解为前者是给webpack使用的,后者是给electron看的。我说的webpack包括了它所有利用到的工具包括babel在内。还有本人用的yaml来代替package.json来配置electron-builder,所以理论上讲本段第一句行得通。
事实我找官方给出的two package目录了,貌似electron-build没有明确给出。本人也是在一次项目经历中才发现electron会把package.json的dependencies打包起来,导致安装包特别大。所以想到方法是用webpack打包main,然后使用一个空的dependencies的package.json。此时突然想起之前看到的two-package目录结构,一下子理解了为什么要这么做。。。。其实就是把electron项目和js项目分开,其实就是两个项目,只是放在一起罢了。
+ app // 作为webpack的输出目录, 和electron的源目录
+ assets // 放一些资源文件
+ dist // 这是webpack打包的输出目录
+ main // 这是webpack对主进程程序打包的构建目录
+ renderer // 这是webpack对渲染进程程序打包的构建目录
+ node_modules // electron执行后产生,仅一个文件,其余为空
+ pages // 页面放在这
- index.html // 这是渲染进程的主页面
- package.json // 给electron看的,app的名字和版本等在此配置
+ config // 放开发配置文件的地方
- electron-builder.yml // electron-builder的配置文件
- webpack.config.main.prod.js // webpack的主进程打包配置文件
- webpack.config.renderer.prod.js // webpack的渲染进程打包配置文件
... // 其余的配置文件,如开发环境下的配置文件
+ dist // 最终的构建目录,也就是electron-builder设置的构建目录
+ mac // 构建mac程序生成目录
+ win-unpacked // 构建win x64程序时生成目录
.... // 其余文件,如dmg和windows安装包文件
+ node_modules // 真正放依赖的地方
+ public // 放一些公共内容, 应该可以由app/assets 和 app/pages代替
+ src // 源代码
+ main // main源代码
+ renderer // 渲染部分代码
+ shared // 公共部分代码
- package.json // 记录所有依赖
以上即是整个项目目录及作用。其中electron-builder会在当项目下有app目录时自动以该目录为根目录。