如何构建Web /电子应用程序 - 代码将在两个地方

Question

我们为Angular 1编写的网站提供了多种工具,用于订单跟踪,定价报价等.它具有非常正常的npm结构

root/
??? build/
??? src/
?   ??? scripts/
?   ??? assets/
?   ??? app.js
|   ??? node_modules/
|   ??? build/
??? package.json
??? webpack.config.js

现在我们要创建一个桌面应用程序,我们决定使用Electron,因为我们已经为网站编写的所有工具都可以正常工作.基本上,计划是扩展网站代码,并使用构建开关隐藏一些仅限桌面的功能.

所以我的问题是,设置文件夹结构的最佳方法是什么？Electron使用子项目(按照约定在./app文件夹中).现在,我把它设置成这样

root/
??? app/
??? build/
??? dist/
??? src/
?   ??? assets/
|   ??? build/
|   ??? node_modules/
?   ??? scripts/
?   ??? app.js
??? package.json
??? webpack.config.js

当我们构建我们的网站时,Webpack将src文件夹编译为build.对于Electron,我们添加了其他步骤,build然后将其内容复制到app(电子子项目文件夹),并运行电子构建,输出到dist.

这有效,但看起来很骇人.有一个更好的方法吗？或者更好的方式来拥有"电子"分支和"网络应用程序"分支？

Answer 1

我记得不久前在电子论坛上找到了一个帖子，其中版主解决了这个问题，并说文件结构没有特定的约定。
不过，根据我的经验，似乎大多数电子应用程序都使用这种结构：

root/ 
??? assets/ 
??? css/
??? js/ 
??? node_modules/
??? index.html
??? main.js
??? package.json
??? (ect..)

或者更多基于 npm 的结构，例如您当前使用的结构。它通常似乎取决于应用程序的复杂性和正在使用的补充工具的约定。

至于拥有单个分支与单独的分支，我认为在这一点上归结为个人喜好，尽管我认为作为单个分支维护可能更容易。

如果您有兴趣查看其他一些方法，可以查看电子网站上的各种样板。