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

Question

I have the following Polymer element with the following dependencies:

• box-el and player-el other Polymer elements
• GameController and KeyboardInputManager classes that are defined in external files, game_controller.js .

The question is, how do I package and publish this element as stand-alone, so it is legitimate for 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>

Note that, I know how to publish this element, I am asking how to include the listed dependencies, namely the other Polymer elements, that I have written, and the external script files.

Answer 1

It's actually not that hard but you need to follow a few steps in a particular order.

There are two issues I see here that need to be solved:

1. Dependency resolution & management
2. Publishing to bower & customelements.io

Use webcomponents.org solutions

If this is your only file so far use Git to grab the generator-element or polymer-boilerplate . These are quickly becoming the standard for polymer element repository structure. Replace the html file for the main element in either if these with yours.

References

distribution article building & publishing article Bower & Polymer video

Manage Dependencies

You will need to install your dependency element and reference them in your component. Use a .bowerrc to determine where your dependencies will install to and use bower install --save <dep1> <dep2> to install them. reference them after your polymer import like this -

 <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"> 

Verify your dependencies get resolved and that your element works then pu. blish with the keyword 'web-components' in your bower.json (should already be there if you used generator-element or polymer-boilerplate )