聚合物服务与静态网络服务器

Question

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

我刚开始一个简单的 "hello world" 项目。当我运行 polymer serve 能够浏览到 http://localhost:8000/example.html and it works great. If I use static-server 的页面并浏览到同一页面时，我在 Chrome.[=17= 中收到一条错误消息]

Uncaught TypeError: Failed to resolve module specifier "@polymer/lit-element". Relative references must start with either "/", "./", or "../".

这里是 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

来自它

This change brings Polymer in line with standard npm practice, and makes it easier to integrate Polymer with other tools and projects. However, because browsers don't yet support importing modules by name, it means you'll need a transform step to run Polymer modules natively in the browser. The Polymer CLI and related tools are being updated to do this transformation automatically.

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

聚合物服务与静态网络服务器

polymer serve vs. static web server

polymer

polymer-cli