具有javascript依赖项的Polymer元素 [英] Polymer element with javascript dependencies

问题描述

我已经创建了用于渲染降价的Polymer元素，它使用了marked.js库.我想知道，推荐的依赖项加载方式是什么?

I've created a Polymer element for rendering markdown which uses the marked.js library. I was wondering, what is the recommended way of loading in its dependencies?

我应该只使用脚本标签吗?

Should I just use a script tag?

<script src="../marked/lib/marked.js"></script>

或者将所有我的依赖项放入html导入并链接到该文件会更好.在这种情况下，我只有一个依赖关系，但我可以轻松拥有更多依赖关系.

Or would it be better to put all of my dependencies into an html import and link to that one file. In this case I only have one dependency but I could easily have more.

<!-- in scripts.html -->
<script src="../marked/lib/marked.js"></script>
<script src="../foo/foo.js"></script>
<script src="../bar/bar.js"></script>

<!-- in mark-down.html -->
<link rel="import" href="scripts.html">

注意:这些路径假定我的元素(及其依赖项)是通过Bower安装的，因此它们都应该是bower_components中的同级对象.

Note: These paths assume my element (and its dependencies) are being installed with bower so they should all be siblings in bower_components.

推荐答案

私有资源应安装在组件文件夹中并直接使用.但是共享资源(我也想使用的其他组件(如marked)的那些资源)应作为依赖项处理.

Private resources should be installed in your component folder and used directly. But shared resources, those resources that other components my also want to use (like marked), should be handled as dependencies.

我们建议使用两种约定来处理共享依赖项:

We suggest two conventions for handling shared dependencies:

1. 始终使用的规范路径(您已经这样做了).按照惯例，Polymer需要一个平面依赖性文件夹(由Bower支持)，因此，您需要的任何资源都必须始终在该路径上.
2. 请参阅 import 以获得共享资源.

1. always use the canonical path which is ../<package-name> (you did this already). Polymer by convention expects a flat-dependency folder (as supported by Bower), so any resource you need must always be on this path.
2. refer to an import for the shared resource.

在这种情况下

<script src="../marked/lib/marked.js">

符合第一个约定.您的组件可以依赖于marked程序包，并希望它存在于../.

meets the first convention. Your component can depend on marked package and expect it to exist at ../.

第二个约定支持共享.如果项目中的多个组件使用script标记加载库，则该库将加载多次.另一方面，导入将被重复数据删除，因此您就不会遇到这个问题.

The second convention supports sharing. If more than one component in a project uses a script tag to load a library, the library will load multiple times. Imports, on the other hand, are de-duplicated, so you don't have this problem.

例如，如果所有组件均以标准方式加载marked:

For example, if all components load marked the standard way:

<link rel="import" href="../marked-import/marked-import.html">

那么，您将只会加载一份脚本.

then you will only ever have one copy of the script loaded.

此外，导入允许您间接调用实际资源.例如，通常marked-import将依赖marked并使用script标记加载JavaScript.但是实际上，任何特定的项目作者都可以修改本地marked-import.html以从CDN或任何其他位置加载主代码.通过导入间接所有访问，我们创建了一个控制点.

Additionally, imports allow you to indirect the actual resource. For example, normally marked-import would depend on marked and use a script tag to load the JavaScript. But in fact, any particular project author can modify the local marked-import.html to load the main code from a CDN or from any other location. By indirecting all access through the import, we create a single point of control.

今天，marked和其他库不包含导入文件，因此我们必须填补这些空白.此外，它将需要与其他组件进行协调(以就任何特定共享资源的标准导入名称达成一致).随着(如果)采用这些约定，随着时间的流逝，此类问题也会减少.

Today, marked and other libraries do not include import files, so we have to fill in those gaps. Additionally, it will require coordination with other components (to have agreement on what the standard import name will be for any particular shared resource). As (and if) these conventions are adopted, such questions will lessen over time.

因此，您安装的组件看起来像这样:

So, your component installed would look something like this:

/components
  /mark-down - depends on marked-import
  /marked-import - (controlled by user, can just depend on `../marked`)
  /marked

这篇关于具有javascript依赖项的Polymer元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！