如何包含用于发布自定义Polymer元素的外部脚本文件？ [英] How to include external script files for publishing custom Polymer element?

问题描述

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

I have the following Polymer element with the following dependencies:

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


• GameController 和 KeyboardInputManager 在外部文件中定义的类， game_controller.js 。

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

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

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>

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

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.

推荐答案

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

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. 依赖性解决方案&管理


2. 发布到bower& customelements.io

使用webcomponents.org解决方案

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

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.

发行文章
building&发布文章
Bower&聚合物视频

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

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

验证您的依赖关系是否得到解决以及您的元素是否正常工作。在bower.json中使用关键字web-componentsblish（如果您使用 generator-element 或 polymer-boilerplate <应该已经存在） code>）

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)

这篇关于如何包含用于发布自定义Polymer元素的外部脚本文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！