如何构建聚合物 2 项目？

Question

也许以下内容对除我以外的任何人来说都是显而易见的，也许它甚至不是纯粹的聚合物问题，但我对这个问题感到迷茫，非常感谢帮助。

首先： - 使用 Polymer 2 和凉亭

问题：

我已经创建了几个组件。其中一些本身就是完整的应用程序，因此它们通过 bower 加载了一组依赖项。这些组件中的每一个都存在于自己的 git 存储库中。到目前为止这么好。效果很好。

每个应用都有这样的结构：

bower_components/
my-comp1.html
my-comp2.html

例如当使用纸质输入我会有一个

<link rel="import" href="bower_components/paper-input/paper-input.html">

现在我想使用这些组件“my-comp1”并在另一个应用程序中使用它。所以我的想法是从各自的仓库安装它们。

我应该说我有一个 bower.json.ignores 文件，其中列出了通过 bower 安装时不应部署的所有文件，该文件还列出了“bower_components”文件夹。

这是真正的问题。假设我的新应用“my-app”从外部 git 加载“my-comp1”。

但是当我安装它时，它会出现在“my-app”的 bower_components 文件夹中，并且“my-comp1”中的路径会因为无法解析而中断

'my-app/bower_components/paper-input/paper-input.html'

但要

'my-app/bower_component/my-comp1/bower_components/paper-input/paper-input.html' 不存在。

我在网上搜索了几个小时在凉亭和 Polymer 世界的建议，但找不到有关如何组织组件化项目的答案。也许我只是忽略了显而易见的事情，但我真的坚持这一点。

重要提示：我没有使用内置的 Polymer 服务器，而是通过我自己的服务器 (jetty) 运行代码，这在我的情况下是必不可少的。

非常感谢任何帮助。

谢谢乔恩

Answer 1

这是一个已知的“问题”，因为您需要从组件的自身角度和应用程序的角度来服务组件。这正是polymer serve 正在解决的问题。

解决方案如下 - 您将假设默认情况下组件在应用程序透视图中提供服务。因此，在您的组件中编写

<link rel="import" href="../paper-input/paper-input.html">.

结构：

my-app
├─ bower_components
│  └─ paper-input
│  └─ my-comp1
|  |  └─ my-comp1.html (import "../paper-input/paper-input.html" works)
|  └─ my-comp2
└─ my-app.html

但是，如果您想处理组件本身，则需要更改其路径。

结构：

my-comp1
├─ bower_components
│  └─ paper-input
└─ my-comp1.html (import "../paper-input/paper-input.html" works)

polymer serve 确实通过两种“服务”方式解决了这个问题：

• 对于组件：

  http://localhost:8080/components/my-comp1/

  => 每个“外部”请求，例如一个额外的../ 将被重定向到bower_components/

• 对于应用程序 http://localhost:8080/

  => 没有什么特别需要的

如何在不使用polymer serve 的情况下解决此问题取决于您的服务器解决方案。你可以使用符号链接、重定向、重写……

一个简单的解决方法是在您的 my-app 中工作并打开 http://localhost/bower_components/my-comp1/demo/。