Question

我的bower.json中有两个依赖项：Polymer / polymer＃^ 2.6.0和webcomponents / webcomponentsjs＃^ v1.1.0。

在我的index.html中，添加后没有任何区别

<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
or  
<script src="bower_components/webcomponentsjs/webcomponents-loader.js">.

从https://www.npmjs.com/package/webcomponents-lite中我读到“ webcomponents-lite.js包括除阴影DOM之外的所有polyfills”，从https://www.npmjs.com/package/web-components-loader中我读到“将HTML文件及其所有依赖项复制到您的命名空间中公共/输出目录”。我可以假定默认情况下，web-components-loader会执行webcomponents-lite所执行的任务，再加上其他一些加载功能吗？是否有任何理由使用一个而不是另一个？似乎webcomponents-lite的加载过程较少，所以如果它满足我的需求，会比webcomponents-loader更好吗？

Answer 1

webcomponents-lite.js将加载所有最低要求的polyfill，即使您使用自然支持的浏览器，例如Chrome，但web-components-loader仍具有一些浏览器的检查功能。由于此检查，由于浏览器支持performance reason，因此将加载以下文件之一。

webcomponents-hi.html
webcomponents-hi-ce.html
webcomponents-hi-sd.html
webcomponents-hi-sd-ce.html
webcomponents-sd-ce.html

以下检查适用：

var polyfills = [];

 if (!('import' in document.createElement('link'))) {
    polyfills.push('hi');
  }
  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
    (window.ShadyDOM && window.ShadyDOM.force)) {
    polyfills.push('sd');
  }
  if (!window.customElements || window.customElements.forcePolyfill) {
    polyfills.push('ce');
  }
  // NOTE: any browser that does not have template or ES6 features
  // must load the full suite (called `lite` for legacy reasons) of polyfills.
  if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
    // Edge has broken fragment cloning which means you cannot clone template.content
    !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
    polyfills = ['lite'];
  }

因此，请使用webcomponents-loader代替webcomponents-lite

使用webcomponents-loader而不是webcomponents-lite时

1 个答案: