如何使用 Web 组件碎片？

Question

有一个新项目，在我看来，是一种固化捆绑元素的方法，web-components-shards。

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

Both projects lack comprehensive instructions in the README, how the file structure should be, what the output should look like and how to use it, or how I can declare which elements are shared between bundles.

考虑这个用例：

示例文件结构

聚合物元素

./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 & shared-element-2用于所有路线

路线：

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

How should I set-up my gulp task so that is splits bundles I can use like so:

/* 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 - 我仍然认为在这里也有一个示例用法 snippet/explanation 会很好。

Answer 1

在那个 web-component-shards 似乎是一个 deprecated/abandoned，我会看一下 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" ] }

对您而言，最重要的部分是 "fragments"，因为它的结构最接近您所描述的应用程序。然后，您可以使用在 CLI 中专门设置的挂钩来处理您的 JADE 以及其他方面。

如何使用 Web 组件碎片？

How do I use Web Component Shards?

polymer

polymer-1.0

web-components-shards

示例文件结构

聚合物元素

路线：