如何使用Web组件碎片？

Question

这是一个新的项目，对我来说似乎是一种在包中加密元素的方法，web-components-shards。

我对gulp版本gulp-web-components-shards感兴趣。

  

两个项目都缺少README中的全面说明，文件结构应该如何，输出应该是什么样子以及如何使用它，或者我如何声明bundle之间共享哪些元素。

考虑这个用例：

示例文件结构

聚合物元素

• ./app/elements
  • shared-element-1/shared-element-1.html
  • shared-element-2/shared-element-2.html
  • homepage-element-1/homepage-element-1.html
  • homepage-element-2/homepage-element-2.html
  • contact-element-1/contact-element-2.html
  • contact-element-1/contact-element-2.html

注意：shared-element-1.html＆amp; shared-element-2用于所有路线

路线：

• ./app/homepage.jade
• ./app/contact.jade

  

我应该如何设置我的gulp任务，以便拆分我可以使用的捆绑包：

/* homepage.jade */

link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/homepage-elements/homepage-elements.html')

/* contact.jade */

link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/contact-elements/contact-elements.html')

注意：我已经打开了Issue - 我仍然觉得在这里有一个示例用法摘要/说明会很好。

Answer 1

在那个web-component-shards似乎是弃用/废弃的，我会看一下Polymer CLI，它在可用的文档中有更多的内容：https://www.polymer-project.org/1.0/docs/tools/polymer-cli#app它允许我们构建我们的应用程序在一个Polymer.json文件中构建，形状如下：

{ "entrypoint": "index.html", "shell": "src/app-shell/app-shell.html", "fragments": [ "src/view-one/view-one.html", "src/view-one/view-two.html" ], "sources": [ "src/**/*", "images/**/*", "bower.json" ], "includeDependencies": [ "bower_components/webcomponentsjs/webcomponents-lite.min.js" ] }

对你而言，最重要的部分是“碎片”，因为它与你描述的应用程序的结构最为接近。然后，您可以使用CLI中专门设置的钩子来处理您的JADE以及不适用的内容。