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

Question

该聚合物入门套件是一个很好的参考,以启动一个项目的聚合物.您只需将所有元素放入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.
• 通过每个元素的演示和测试文件夹,您的目录结构可以非常快速地增长

这是一篇很好的文章,描述了这个问题并指出了两个解决方案:

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

像Topeka App中的单独元素存储库适用于~30个元素,但是一旦你有多达100个元素,你就会遇到同样的问题.

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

所以我想知道,有关如何构建大型Polymer应用程序的良好实践？是否有任何项目的例子超过30个元素？

包含多个元素的可重用元素repos的优良做法是什么？

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

一般来说:您如何扩展聚合物项目？

Answer 1

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

因此，例如，当您创建单个元素进行测试时，它通常直接位于项目目录中，但 Web 服务器将此父元素直接映射到 /components 中。它对 Bower_components 执行相同的操作，因此它们在浏览器级别显示在同一位置。这就是为什么像 ../polymer/polymer.html 这样的参考文献有效

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

最终结果将是一个整体项目“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