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

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

实际上并不难，但您需要按特定顺序执行几个步骤。

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

1. 依赖关系解析和管理
2. 发布到 Bower 和 customelements.io

使用 webcomponents.org 解决方案

如果这是您迄今为止唯一的文件，请使用 Git 获取 generator-element 或 polymer-boilerplate 。这些正在迅速成为 polymer 元素存储库结构的标准。将其中主要元素的 html 文件替换为您的文件。

引用

distribution article building & publishing article Bower & Polymer video

管理依赖项

您将需要安装依赖项元素并在组件中引用它们。使用 .bowerrc 确定依赖项将安装到的位置并使用 bower install --save <dep1> <dep2>安装它们。像这样导入 polymer 后引用它们 -

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

验证您的依赖关系是否已解决并且您的元素是否可以正常工作。 blish 在 Bower.json 中使用关键字“web-components”(如果您使用 generator-element 或 polymer-boilerplate ，则应该已经存在)