javascript - 如何重建 Polymer 的 TodoMVC App

Question

这更像是一个关于学习 Polymer 1.0 的一般性问题，它被提出了 by the polymer team在 stackoverflow 上发布它们。

我个人学习东西的最佳方式是重新构建小应用程序。一个很好的来源是todomvc.com .

我在重建 Polymer 应用程序时遇到了问题，因为 their javascript file好像是这个124kb或者美化后的4736行javascript代码，几乎不可能重现。

这些行似乎包含与使用的所有其他元素(flatiron-director、iron-selector、iron-localstorage 等)关联的任何 javascript 以及可能与核心库关联的一大堆 javascript，不确定是哪个.

有人会如何复制这个 todomvc-app？

与 vue todo app javascript file 相比，最多只需要 123 行实际 javascript 代码即可正常运行，但 polymer 的 4736 行代码似乎有点不成比例，无法作为 todomvc.com 堆栈中的用于教育目的的应用。

关于如何实际复制 polymer 的 todomvc 应用程序的任何想法？

此外，该应用程序似乎并没有按照 Polymer 的模块化理念构建，因为有一个巨大的 elements.build.html 文件，其中包含四个 dom 模块，而不是不同的自定义元素。 Polymer 应用程序是否应该以这种方式构建，或者这个特定的应用程序是否以这种方式构建，因为有我不知道的任何限制？

---

编辑

有人建议将 builds.elements.html 重命名为 elements.html，但这没有用，因为没有显示任务并且添加任务会抛出错误:

Uncaught TypeError: Cannot read property 'concat' of undefined

Answer 1

elements.build.html 和 elements.build.js 是在构建步骤中通过运行 npm run build 生成的。参见 Making Updates .

要从此示例中学习，我建议您:

1. 克隆存储库
2. 使用 npm 和 bower 安装依赖项
3. 删除 index.html(可能)
4. 清空 elements/ 目录
5. 添加以下空白文件:
   • index.html 如果你删除了它
   • elements/elements.html
   • elements/td-input.html
   • elements/td-item.html
   • elements/td-model.html
   • elements/td-todos.html
6. 实现一个文件并与源代码进行比较
7. npm run build
8. python -m SimpleHTTPServer(或您选择的服务器)
9. 重复步骤 5 - 8

您可能会收到涉及 learn.json 的 404 Not Found .要解决它，您可以自己添加文件或删除调用它的代码。