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

Question

我正在为一个大型的多开发人员项目构建一个app框架.我出售的想法是使用Require.js和Angular来管理依赖和类加载.但现在我也想使用聚合物,因为它非常酷.

我如何使用require.js加载聚合物元素库与我的js一样？我喜欢坚持要求作为加载我所有应用资源的真正方式的想法.我看到能够将模板,脚本和样式捆绑到一个代表组件的逻辑.html文件中是多么美妙,我知道我们可以将这些部分分解为单独的文件,但是只要我看到任何链接rel ="导入"里面的东西我觉得这是进入require.js的境界.

想法？

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.datatables.js依赖于 jquery 的脚本。像这样布局你的文件：

• 成分
  • 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只会加载一次。