如何将 AMD 模块导入 Polymer 自定义元素？答案

【问题标题】：How to import an AMD module into a Polymer custom element?如何将 AMD 模块导入 Polymer 自定义元素？
【发布时间】：2016-12-15 13:46:44
【问题描述】：

我正在将现有的 Web 应用程序转换为 Polymer。 Web 应用程序由组件（在 Knockout 组件架构中）和模块组成。两者都是使用 RequireJS 加载的。我了解如何将 Knockout 组件转换为 Polymer 自定义元素，但不了解如何处理 JavaScript 模块。 RequireJS 模块返回一个 JavaScript 对象，该对象通过“define”函数的参数传递给依赖它的 JavaScript。如果模块代码是通过 HTML 导入而不是 RequireJS 加载的，那么似乎没有办法获取该对象。

例如，一些现有组件使用moment.js 模块进行日期/时间操作。他们通过 RequireJS 加载它，它向他们传递了对 moment 对象的引用。在其中一个 Polycast 视频中，Rob Dobson 说建议的做法是编写一个仅包含 <script> 标记的 moment.html 文件以导入 moment.js。然后，Polymer 自定义元素可以执行 moment.html 的 HTML 导入，但这不会让组件访问由 moment.js 模块返回的对象。 Moment 不会将该对象放在全局命名空间中，那么 Polymer 自定义元素如何访问该 moment 对象？

【问题讨论】：

我使用了 moment 和 Polymer。您唯一需要做的就是使用源标签导入脚本，然后您可以像 moment(date).format('D MMM YYYY') 一样在您的 ploymer 函数中直接使用它
不推荐使用矩。使用它会在控制台中生成以下消息：“弃用警告：不推荐通过全局范围访问 Moment，并将在即将发布的版本中删除。”关键是应用程序中的模块不会在全局命名空间中放置任何东西，而是通过 RequireJS 的“定义”函数将引用传递给依赖组件。
你做了一个凉亭安装的时刻吗？
@DennisMcCarthy 实际上，moment.js 本身是 adds a moment property to the current context，在 HTML 导入和 <script> 标签的情况下是 Window 对象，使其在全球范围内可用。值得注意的是，当脚本以 HTML 格式导入时，我没有看到任何弃用警告（或任何相关消息）。 codepen

标签： requirejs polymer polymer-1.0 amd

【解决方案1】：

来自 Polymer 团队的 Justin Fagnani：

“听起来你需要一个与 Polymer / HTML Imports 一起使用的模块加载器/注册表。我做了一个叫做 IMD 的东西：https://github.com/PolymerLabs/IMD

它只是一个与 AMD 兼容的模块注册表，而不是加载器，因此所有模块都必须通过显式或标记加载，这确保了依赖关系的顺序得以保留。”

它完全符合我的要求。

【讨论】：