12

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。
  • 每个元素都有一个演示和测试文件夹，您的目录结构会快速增长

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

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

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

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

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

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

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

一般而言：您如何扩展 Polymer 项目？

4

3 回答 3

1

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

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

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

于 2016-11-30T19:51:31.967 回答
0

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

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

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

于 2016-05-19T04:46:24.797 回答
0

考虑文件结构和 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
于 2015-11-25T18:05:23.367 回答