Question

我有以下具有以下依赖关系的Polymer元素：

box-el和player-el其他Polymer元素

GameController

KeyboardInputManager和game_controller.js个类。

问题是，如何将此元素打包并发布为独立元素，因此customelements.io是合法的。

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="soko-ban">
  <template>
    <link rel="stylesheet" href="soko-ban.css">
    <template repeat="{{box in boxes}}">
      <box-el model="{{box}}"></box-el>
    </template>
    <player-el model="{{player}}" id="character"></player-el>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
       ready: function() {

         var controller = new GameController();

         this.player = model.player;
         this.boxes = model.boxes;

         var inputManager = new KeyboardInputManager();
       });

     })();
  </script>
</polymer-element>

请注意，我知道如何发布这个元素，我想知道如何包含列出的依赖项，即我编写的其他Polymer元素和外部脚本文件。

Answer 1

实际上并不那么难，但你需要按照特定的顺序执行几个步骤。

我在这里看到的两个问题需要解决：

依赖性解决方案＆amp;管理
出版给凉亭＆amp; customelements.io

使用webcomponents.org解决方案

如果这是您目前唯一的文件，请使用Git抓取generator-element或polymer-boilerplate。这些正在迅速成为聚合物元素库结构的标准。如果主要元素与你的主要元素一起替换html文件。

distribution article building & publishing article Bower & Polymer video

管理依赖关系

您需要安装您的依赖项元素并在组件中引用它们。使用.bowerrc确定依赖项的安装位置，并使用bower install --save <dep1> <dep2>进行安装。在你的聚合物导入之后引用它们 -

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="relative/path/to/my/first/bower/dependency">
<link rel="import" href="relative/path/to/my/second/bower/dependency">

验证您的依赖项是否得到解决，然后您的元素工作，然后pu。使用关键字＆＃39;网络组件＆＃39;在您的bower.json中（如果您使用generator-element或polymer-boilerplate，则应该已经存在）

如何包含外部脚本文件以发布自定义Polymer元素？

1 个答案:

使用webcomponents.org解决方案

管理依赖关系