如何构建 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

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

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

或者像您当前使用的那样基于 npm 的结构。它通常似乎取决于应用程序的复杂性和所使用的补充工具的约定。

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

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