How to include external script files for publishing custom Polymer element?

问题

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.

回答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:

Dependency resolution & management
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)

来源：https://stackoverflow.com/questions/25951777/how-to-include-external-script-files-for-publishing-custom-polymer-element

标签

javascript

html5

polymer

web-component