如何重建 Polymer 的 TodoMVC App

Question

这更像是一个关于学习 Polymer 1.0 的一般性问题，建议by the polymer team 发布它们在 Whosebug 上。

我个人学习东西的最好方法是重建小应用程序。 todomvc.com.

是一个很好的来源

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

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

如何将此复制到domvc-app？

相比于vue todo app javascript file，最多只需要123行实际javascript代码就可以正常运行，polymer的4736行代码似乎有点不成比例用于教育目的的应用程序 在 todomvc.com 堆栈中。

知道如何实际将聚合物复制到 domvc 应用程序吗？

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

---

编辑

建议只将 builds.elements.html 重命名为 elements.html，但这没有用，因为任务未显示并且添加任务会引发错误：

Uncaught TypeError: Cannot read property 'concat' of undefined

Answer 1

这是 Polymer 1.0 TodoMVC 应用程序的应用程序源。 https://github.com/tastejs/todomvc/tree/master/examples/polymer

注意 package.json 文件。它在 polybuild 下，所以你会看到一个 elements.build.html 文件。

Answer 2

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。要解决它，您可以自己添加文件或删除调用它的代码。