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

时间:2015-10-29 20:31:10

标签: polymer polymer-1.0 polymer-starter-kit

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的优良做法是什么?

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

一般情况下:您如何扩展聚合物项目?

3 个答案:

答案 0 :(得分:1)

我们有一个生产应用程序,提供100个元素。我们发现将文件夹内的多个元素分组以减少回购和文件夹的数量很有用。我们仍然使所有元素兄弟姐妹。

谷歌自己的元素中有一些先例。如果您看一下app-layout和polymerfire,它们都包含多个自定义元素。

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

答案 1 :(得分:0)

考虑文件结构和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

答案 2 :(得分:0)

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

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

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