如何构建具有 100 多个元素的大型聚合物项目答案

【问题标题】：How to structure large Polymer projects with 100+ elements如何构建具有 100 多个元素的大型聚合物项目
【发布时间】：2015-10-29 20:31:09
【问题描述】：

Polymer Starter Kit 是启动 Polymer 项目的一个很好的参考。您只需将所有元素放入app/elements 文件夹即可。这对于中小型项目非常有效。

当你有超过 30 个元素时，它会变得混乱。然后，您想将平面 elements 文件夹重构为更深的文件夹结构，如下所示：

- elements -- my-module-1 --- my-element-1-1 --- my-element-1-2 -- my-module-2 --- my-submodule-2-1 ---- my-element-2-1-1 ---- my-element-2-1-2 --- my-submodule-2-2 ---- ...

有几个问题：

当您想要演示和测试子模块时，您需要在每个元素定义之上导入所有依赖项
你打破了“所有元素都是兄弟姐妹”的模式
你的相对路径变得混乱（很多../../../my-module-x/my-module-y）
你要么有很多路径，比如../../../../bower_components，要么你使用/bower_components，那么你需要在你的开发服务器中有一个重定向，绝对路径会搞砸gulp-vulcanize。
每个元素都有一个演示和测试文件夹，您的目录结构会快速增长

这是nice article 描述问题并指出两个解决方案：

独立的元素存储库
构建可重用元素

像Topeka App 中的单独元素存储库适用于大约 30 个元素，但一旦达到 100 多个元素，就会遇到同样的问题。

一开始，构建可重用元素似乎是个好主意，因为您可以很好地封装所有内容。但是处理数百个 repos 是很痛苦的，当你想在你的 repo 中包含多个单个元素时，标准模式就会中断。

所以我想知道，关于如何构建大型 Polymer 应用程序有哪些好的做法？有没有超过 30 个元素的项目示例？

对于包含多个元素的可重用元素 repos，有哪些好的做法？

多入口点的良好结构是什么？

总的来说：您如何扩展 Polymer 项目？

【问题讨论】：

对您当前的问题没有任何帮助。但我观看了一些 PolymerIO 视频，他们谈到了简化使用包含依赖项的计划（也许自动导入所需的依赖项？）。换句话说，即使目前对您来说是个问题，但在“不远”的将来可能会容易得多。 :)
您的意思可能是Polygit ？ “Magic Server 直接从 github 提供文件”。它使拥有多个 repos 变得更容易一些（因为您不需要在每次更改后执行bower update），但是如果您遵循标准的可重用元素方法，您仍然需要提交 100 个 repos...

标签： polymer polymer-1.0 polymer-starter-kit

【解决方案1】：

我们有一个提供 100 种元素的生产应用程序。我们发现将文件夹内的多个元素分组以减少存储库和文件夹的数量很有用。我们仍然使所有元素成为兄弟。

这在 Google 自己的元素中有一些先例。如果你看一下 app-layout 和 polymerfire，它们都包含多个自定义元素。

思想转变是要记住不是每个元素都应该存在于它自己的目录中。

【讨论】：

【解决方案2】：

考虑文件结构和 url 结构之间的区别对您的问题很有用。使 Web 服务器将文件映射到同一个位置。这就是 polyserve 所做的，您也可以配置 wct 来设置它的服务器。

因此，例如，当您创建要测试的单个元素时，它通常直接位于项目目录中，但 Web 服务器将此父元素直接映射到 /components。它对 bower_components 做同样的事情，所以它们在浏览器级别出现在同一个地方。这就是为什么像 ../polymer/polymer.html 这样的引用会起作用

我正在考虑您在上面提出的方案，您在每个子模块级别重复执行类似的操作，以便每个元素都可以引用聚合物或其在 ../polymer/polymer.html 的其他 Web 组件

最终结果将是一个看起来像这样的整体项目“URL”结构

-components (elements mapped to this as well as bower_components) 

--mymodule1 
---(mapped so all directories under bower_components are mapped in here)

---myelement1.1
---myelement1.2

--mymodule2
---(mapped so all directories under bower_components are mapped in here)
---myelement2.1
---myslement2,2

【讨论】：

这还是会搞砸硫化
@OlivierLangelaar 必须承认我已经放弃担心硫化，因为我使用 http/2 并将所有组件作为单独的负载。帮助我也懒加载（见最后一个多播）

【解决方案3】：

IMO 组织 Polymer 元素的关键在于设计问题/页面的解决方案。考虑为特定模型设计乐高积木。是的，您可以构建许多具有非常特定功能的部件，但最好关注可重用性并设计更少的部件来覆盖大部分结构（基本元素），然后添加一些修饰部件（修饰元素）来完成模型。基本元素应该简单且非常通用。

虽然修饰元素不太可能被回收，但它们可以留在页面上。另一方面，基本元素应放置在非常靠近根目录的文件夹中，并具有非常具有描述性的名称。随着开发的进展，新基本元素的出现率将会降低，开发新页面所需的时间也会减少。

如果设计是正确的，那么你如何对元素进行分类并不重要，只要将它们放在 bower_components 文件夹中，除非你正在构建公共聚合物元素。 bower_components 中的所有内容都应由 bower.json 控制，因此您将删除整个文件夹并使用 bower install 重新填充它。

【讨论】：