如何重建聚合物的TodoMVC应用程序

Question

这是一个关于学习聚合物1.0的的一般问题，并建议由聚合物团队在堆栈溢出上发布它们。

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

我很难重新构建聚合物应用程序，因为他们的javascript文件似乎只有124 it，或者美化了4736行的javascript代码，这使得它几乎不可能复制。

这些行似乎包含与使用的所有其他元素相关的javascript (flatiron-director、铁选择器、铁-localstorage等)。还有大量的javascript可能与核心库相关联，不确定是哪个库。

有人会怎么复制这个todomvc应用程序？

与仅需123行实际javascript代码才能正常工作的vue todo应用javascript文件相比，聚合物的4736行代码似乎有点不成比例，成为todomvc.com堆栈中用于教育目的的应用程序。

你知道如何才能真正复制聚合物的todomvc应用程序吗？

此外，这个应用程序似乎没有按照聚合物的模块化原则构建，因为有一个巨大的elements.build.html文件，它包含四个dom模块，而不是不同的自定义元素。聚合物应用程序应该是这样构建的，还是这个特定的应用程序是这样构建的，因为我不知道有什么限制？

编辑

有人建议将builds.elements.html重命名为elements.html，但这不起作用，因为没有显示任务，添加任务会引发错误：

未定义的TypeError:无法读取未定义的属性“concat”

Answer 1

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

为了从这个例子中学习，我建议您：

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

​

1. 实现一个文件并与源进行比较
2. npm run build
3. python -m SimpleHTTPServer (或您选择的服务器)
4. 重复步骤5-8

您可能会得到一个404不涉及learn.json。要解决这个问题，您可以自己添加文件，也可以删除调用它的代码。

Answer 2

以下是聚合物1.0 TodoMVC应用程序的应用程序源。https://github.com/tastejs/todomvc/tree/master/examples/polymer

注意package.json文件。它是在多元构建下进行的，所以你才会看到一个elements.build.html文件。