Require.js加载所有资源的应用程序，包括聚合物 [英] Require.js to load all resources for an app, including Polymer

问题描述

我建立了一个大型的，多项目开发的应用程序框架。我卖了使用Require.js和角度共同来管理依赖和类加载的想法。但现在我想用聚合物为好，因为它是出奇的冷静。

I am building an app framework for a large, multi developer project. I am sold on the idea of using Require.js and Angular together to manage dependency and class loading. But now I want to use Polymer as well, because it's insanely cool.

我怎么能使用require.js加载聚合物元件库一样的是我的js的呢？我喜欢挂在要求作为唯一正确的方法来加载我所有的应用程序资源的想法。我看到它是多么高兴能够捆绑模板，脚本和样式在其中重新presents组件一个逻辑.html文件，我知道我们能打破这些零件出到单独的文件，但只要我看不到任何链接rel =进口里面的东西，我觉得是进入require.js的境界。

How could I use require.js to load polymer elements libraries just the same as my js ones? I like the idea of hanging on to require as THE one true way to load all my apps resources. I see how nice it is to be able to bundle template,script and style into one logical .html file which represents a component, and I know that we can break those parts out into separate files, but as soon as I see any link rel="import" stuff inside I feel that is going into require.js's realm.

想法？

推荐答案

有是两者之间有些紧张，因为既想成为记录系统跟踪依赖关系。例如，如果你做的 /components/core-ajax/core-ajax.html 的HTTP导入它包含的HTTP导入../聚合物/ polymer.html ，确保聚合物在运行任何脚本核心阿贾克斯之前加载。聚合物也有一个称为硫化编制一套Web组件的成单个文件，以减少生产的HTTP请求的数目的工具。

There's some tension between the two because both want to be the system of record for tracking dependencies. For example, if you do an http import of /components/core-ajax/core-ajax.html it contains an http import of ../polymer/polymer.html, ensuring that Polymer is loaded before running any of the scripts for core-ajax. Polymer also has a tool called vulcanize for compiling a set of web components into a single file to reduce the number of HTTP requests in production.

听起来很熟悉？ require.js具有用于所有这些片的类似机制。另外值得一提的是，我不知道什么是正在做统一这一切，使事情更加复杂的还有该公司收集蒸汽ES6模块建议。

Sound familiar? require.js has an analogous mechanism for all of these pieces. It's also worth noting that I'm not aware of what's being done to unify all of this, and to make things more complicated there's the ES6 Modules proposal that's gathering steam.

我对当下的建议是如果可能的话挑只有一个依赖跟踪。我建议你​​使用HTML进口的，如果你是使用Web组件，因为它是比较容易一requirejs模块转换成一个简单的Web组件比它去反之亦然。

My recommendation for the moment is to pick exactly one dependency tracker if possible. I'd suggest you use HTML imports if you're using web components as it's comparatively easier to convert a requirejs module into a simple web component than it is to go vice versa.

例如。假设你已经有了一个脚本 jquery.datatables.js 依赖于jQuery的。布局文件，如：

e.g. suppose you've got a script jquery.datatables.js that depends on jquery. Layout your files like:

• 组件
  
  
  
  • jquery.datatables
    
    
    
    • jquery.datatables.js
    
    
    • jquery.datatables.html
    
    
    
    
    • 的jquery.js
    
    
    • jquery.html
    
    

    jquery.html将包含：

    jquery.html would contain:

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

    和在jquery.datatables.html你把：

    And in jquery.datatables.html you'd put:

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

    HTML进口照顾做重复数据删除的，所以你可以放心， jquery.html 只会加载一次。

    这篇关于Require.js加载所有资源的应用程序，包括聚合物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！