ES6模块与HTML导入 [英] ES6 Modules vs. HTML Imports

问题描述

HTML导入是 Web组件规范，并提供了一种处理Web依赖项的方法. ES6模块也做同样的事情，只是针对Javascript代码.

HTML Imports are a part of the Web Components specification and provide a way to handle dependencies on the Web. ES6 modules also do the same thing, but just for Javascript code.

这两个如何协同工作是否明确?

Is there is any clarity on how these two will work together?

一个例子:在我最近的一个项目中，我有两个Javascript组件(文件)，其中一个依赖于另一个，但是任何HTML代码(另一个组件)都可以使用的任何一方.因此，当我在HTML中包含依赖脚本时，我也不想包含父脚本(避免手动依赖处理).除了将ES6模块与脚本包含混合在一起之外，似乎没有明确的方法可以做到这一点.我看到的唯一选择是为每个组件维护一个单独的文件，并指定必需的文件和依赖项，例如component.io.

An example: On a recent project of mine, I had two Javascript components (files) one of which depended on the other, but any HTML code (which is another component) could use either of them. So when I included the dependent script in my HTML, I did not want to include the parent script too (avoiding manual dependency handling). There seems to be no well-defined way to do it, other than mixing ES6 modules with script includes. The only option I see is maintaining a separate file for each component, with the required files and dependencies specified, such as component.io does.

推荐答案

Web组件与ES6模块的交互方式尚未最终确定，但是至少有两个选择.

How web components interact with ES6 modules has not been finalized yet, but there are at least two options.

ES6的概念是领域.如果两个iFrame中都有JavaScript，则这两个iFrame可以相互通信并来回传递数据.但是它们处于不同的领域.这意味着您可以在一个中修改Array.prototype对象，而又不影响另一个.每个Web组件很可能都有自己的领域，因此它们不会互相干扰.

ES6 has the notion of realms. If you have JavaScript in two iFrames, then the two iFrames can communicate with each other and pass data back and forth. But they are in different realms. This means that you can modify the Array.prototype object in one without affecting the other. Each web component will most likely have its own realm, and so they will not interfere with each other.

每个领域都有一堆全局对象，并且包括(很可能尚未完成规范)Loader对象.您可以创建Loader的新实例，并使用它来加载模块.领域中已经存在一个，这是默认值.每个Loader实例都有自己定义的模块列表，因此每个Web组件都可以拥有自己的Loader实例.

Each realm has a bunch of global objects, and that includes (most likely, the spec isn't finalized yet) the Loader object. You can create a new instance of a Loader and use it to load modules. There already exists one in the realm, which is the default one. Each Loader instance has it's own list of defined modules, and so each web component could be given it's own Loader instance.

我不确定Web组件是否将被赋予不同的Realms或不同的Loader对象，但是不同的Web组件很可能不会相互干扰.

I'm not sure if webcomponents will be given different Realms or different Loader objects, but different web components will most likely not be able to interfere with each other.

这篇关于ES6模块与HTML导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！