聚合物服务与静态Web服务器

Question

polymer-serve做了什么魔力，而我无法用简单的静态Web服务器获得？

我刚刚从一个简单的"hello world"项目开始。当我运行polymer serve时，我可以浏览到 http://localhost:8000/example.html 的页面，它工作得很好。如果我使用 static-server 并浏览到同一网页，则会在 Chrome 中收到错误消息。

未捕获的类型错误：无法解析模块说明符"@polymer/点亮元素"。相对引用必须以"/"、"./"或"../".

这是示例.html，它是直接从自述文件中复制出来的。

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module">
  import { LitElement, html } from "@polymer/lit-element";
  class MyElement extends LitElement {
    static get properties() {
      return {
        mood: { type: String }
      };
    }
    constructor() {
      super();
      this.mood = "happy";
    }
    render() {
      return html`
        <style>
          .mood {
            color: green;
          }
        </style>
        Web Components are <span class="mood">${this.mood}</span>!
      `;
    }
  }
  customElements.define("my-element", MyElement);
</script>
<my-element mood="happy"></my-element>

Answer 1

模块按名称而不是路径导入

例如检查此引用

从它

这一变化使聚合物符合标准的npm实践，并且 使聚合物与其他工具和项目集成变得更加容易。 但是，由于浏览器尚不支持按名称导入模块， 这意味着您需要一个转换步骤才能在本地运行 Polymer 模块 在浏览器中。聚合物 CLI 和相关工具正在更新为 自动执行此转换。

运行聚合物构建应创建转换后的文件（由路径引用）