Question

polymer-serve在做什么样的魔术，而我却没有使用简单的静态Web服务器？

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

未捕获的TypeError：无法解析模块说明符“ @ polymer / lit-element”。相对引用必须以“ /”、“./”或“ ../”开头。

这是example.html，它是直接从README复制而来的。

<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

模块是通过名称而不是路径导入的

例如检查此reference

从它

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

运行 polymer build 应该创建转换后的文件（按路径引用）

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

1 个答案: