使用Require.js加载应用程序的所有资源，包括Polymer。

Question

我正在为一个大型、多开发者的项目构建一个应用程序框架。我已经接受使用Require.js和Angular来管理依赖和类加载的想法了。但是现在我也想使用Polymer，因为它非常酷。

那么我该如何使用Require.js来加载Polymer元素库，就像我的js元素一样呢？我喜欢将Require作为加载所有应用程序资源的“唯一真理”的想法。我知道将模板、脚本和样式打包成一个逻辑的.html文件代表一个组件很方便，而且我们可以将这些部分分别拆分成不同的文件，但是一旦我看到任何link rel="import"的内容，我就觉得这进入了Require.js的领域。

你有什么想法吗？

- httpete

Answer 1

两者之间存在一些紧张关系，因为双方都想成为跟踪依赖项的记录系统。例如，如果您通过http导入/ components / core-ajax / core-ajax.html，它包含一个http导入../ polymer / polymer.html，确保在运行任何core-ajax脚本之前加载了Polymer。 Polymer还有一个称为vulcanize的工具，用于将一组Web组件编译成单个文件，以减少生产中的HTTP请求数量。

听起来很熟悉吧？require.js也拥有所有这些部分的类似机制。值得注意的是，我不知道正在做什么来统一所有这些内容，并且使事情更加复杂的是ES6模块提案正在积极开发。

目前我的建议是尽可能选择一个依赖项跟踪器。如果您正在使用Web组件，则建议使用HTML导入，因为将requirejs模块转换为简单的Web组件比反过来容易得多。

例如，假设您有一个依赖于jquery的脚本jquery.datatables.js。排列文件如下：

• components
  • jquery.datatables
    • jquery.datatables.js
    • jquery.datatables.html
  • jquery
    • jquery.js
    • jquery.html

jquery.html将包含：

<script src='jquery.js'></script>

在jquery.datatables.html中，您需要放置以下代码：

<link rel='import' href='../jquery/jquery.html'>
<script src='jquery.datatables.js'></script>

HTML Imports会自动去重，所以您可以放心，jquery.html只会被加载一次。

- Peter Burns

---

我想知道ES6模块如何与AMD互操作？我无法想象在没有AMD / require的情况下组织一个大项目。 - httpete

那是另一个问题了，但是Square的es6模块转译器今天支持编译成AMD风格的模块，而且由于es6模块加载行为是可插拔的，因此可能可以进行互操作。 - Peter Burns

我发现这个讨论非常有帮助，可以了解requirejs AMD风格DI和HTML导入之间的权衡（简而言之，选择HTML导入，它们超越了requirejs所能做到的）。 - Renaud