标签: polyfills

我正在尝试使用 的数字格式化程序Intl，它在 iOS 上完美运行，并且当调试器连接到 iOS 或 Android 时，但由于 Android 中的 JSC 过时，仅在没有连接调试器的情况下在 Android 上失败。

经过一番研究，我发现了两种可能的解决方案：

• 使用Intlpolyfill
• 在 Android 中使用自定义 JSC

Intl在安装intl和react-intl使用纱线后，我首先像这样尝试了polyfill ：

//in my app's index.js
if (!global.Intl) {
    global.Intl = require('intl');
}

虽然它仍然说ReferenceError: Can't find variable: Intl。

然后我放弃并尝试包含自定义 JSC（我已经确认正确引用了自定义 AAR），尽管我仍然遇到相同的错误。无论我做什么，我都无法Intl在没有附加调试器的情况下在 Android 上运行。

我究竟做错了什么？（我使用的是 React Native 0.59.9）

HTML5中的新表单属性和标签非常棒.不幸的是,在Chrome和Firefox中对这些只有有限的支持,在IE9及以下版本中基本上不支持这些.

我已经调查过使用Modernizr和HTML5 polyfill在缺乏本机支持的浏览器中填充此功能.但是,HTML5表单功能似乎有大量的polyfill,例如webshims lib,webforms2和h5f(例如参见https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser上的列表)-Polyfills)我不确定哪一个或哪些我应该花时间学习.

哪些HTML5形式的polyfill会给我最广泛的HTML5功能和浏览器覆盖范围？

我正在使用ChildNode.remove(),我在Mozilla中描述我需​​要一个用于IE的polyfill.我正在使用配置了babel-polyfill的webpack:

 "babel-polyfill": "^6.13.0",
 "webpack": "^2.4.1",

webpack.config.babel.js:

    entry: ['babel-polyfill', join(__dirname, path, "index.web.js") ],

我的假设是,babel-polyfill会为我提供我需要的所有常见的polyfill - 但事实并非如此,我在Internet Explorer 11中有错误.我错过了另一个配置吗？

谢谢

我正在学习如何使用@babel/preset-env我们的客户所需的浏览器polyfills。我的理解是，如果访问网站的客户端是目标环境之一，babel 就会发送polyfills。似乎有两种方法可以指定目标环境： 1. browserlist 2.targets选项{ "presets": [["@babel/preset-env", { "targets": "defaults" }]] }

但这里有几点我不太明白：

1. 看起来 Polyfills 都来自core-js. 添加 polyfill 似乎是一个构建时过程。我不太明白的是 babel 实际上是如何选择客户端需要的 polyfills 的 - babel 是一次性导入所有的 polyfills 并且仅在需要时在运行时应用它还是仅在构建时导入所需的 polyfills？如果 Babel 没有选择要应用的 polyfill，那么在运行时会如何发生这种情况？有人可以向我详细解释一下吗？
2. 使用选项targets设置目标环境与使用browserlist设置目标环境有什么区别？此外，我对 的默认查询感到困惑targets。在 babel 的文档上它说

因此，preset-env 的行为与 browserslist 不同：当 Babel 或 browserslist 配置中没有找到目标时，它不会使用默认查询。如果您想使用默认查询，则需要显式地将其作为目标传递：

因此，仅拥有{ "presets": ["@babel/preset-env"] }不会给我们默认查询，我们必须显式地将目标设置为默认值，如"presets": [["@babel/preset-env", { "targets": "defaults" }]]？

3. 这与我的第二个问题有关 - 如果我有一个项目已经定义"@babel/preset-env"但没有browserlist …

在许多情况下使用CSS 属性时， 某些 Android 设备（本机浏览器）elementFromPoint()会损坏overflow:auto，因此它会返回overflow:auto正确元素的父元素（带有的元素）。

该函数是否有完整、快速的替换/polyfill，类似于本机函数，但是是用 JavaScript 编写的？

我知道这些offsetXXXXX属性，但是当添加滚动和位置/溢出 CSS 设置时，事情变得复杂......

我正在尝试在角度应用程序中使用webshims polyfill,它也使用requirejs进行依赖项管理.我试图form在表单字段中填充缺少属性,例如input和button,它告诉浏览器形成特定按钮或输入属于哪个.IE9缺乏此功能.

我认为使用此polyfill的最佳方法是创建一个form指令,并调用$.webshims.polyfill('forms')link函数内部.

define(['angular', 'webshims'], function(angular) {
  return angular.module('myApp').directive('form', ['$window', function($window) {
    return {
      restrict: 'E',
      scope: false,
      link: function($scope, iElement, iAttrs) {
        if (!(window.Modernizr.input.placeholder || window.Modernizr.input.autofocus)) {
          $.webshims.setOptions({
            waitReady: false
          });
          $.webshims.polyfill('forms');
        }
      }
    };
  }
]);

以下是我现在正在加载webshims polyfill的方法:

app: {
  options: {
    baseUrl: 'src/apps',
    stubModules: ['cs'],
    paths: {
      jquery: '../public/components/jquery/jquery',
      ....
      angular: '../public/components/angular/angular',
      ....
      webshims: '../public/components/webshim/src/polyfiller',
    },
    shim: {
      angular: {
        deps: ['jquery'],
        exports: 'angular'
      }, …

这里发布的是一个答案,指示错过旧window.showModalDialogJavaScript函数的人使用

<dialog>

元素而不是.我已经将它与IE和FF所需的polyfill一起使用,并且它可以工作.但是,使用我希望避免使用Chrome的polyfill时会出现明显的延迟(更不用说在浏览器支持时不会使用polyfill的警告).如何检测对话框元素是否受支持,以便省略polyfill处理？特别是这些线:

var dialog = document.getElementById('<element id>');
dialogPolyfill.registerDialog(dialog);

像polyfill.io这样的 Polyfill 服务似乎只向浏览器提供小功能检测，然后只延迟加载实际需要的 polyfill。

据我了解关于 polyfilling的babel 文档，babel 总是包含全套可能需要的 polyfill：它会处理 a browserslist，然后包含最弱浏览器需要的 core-js 中的那些 polyfill。像 webpack 这样的打包器可能会将所有这些 polyfill 合并到应用程序中，但不会检测到运行时功能。

我的应用程序使用现代 ES 语言功能，但也针对各种浏览器，包括 IE10 和 IE11。这需要大量的 polyfill，并且可能会使包膨胀，尤其是对于可能不需要大部分 polyfill 的现代浏览器。

所以我想知道：我可以告诉 babel 和/或 webpack 只包含功能检测，将 polyfill 分成单独的块（单独或分成小包），然后在运行时，只“懒惰”加载实际上是什么需要吗？

我需要建立一个应该需要工作与两个规格，组件custom elements spec v0它得到了过时和custom elements spec v1，最新的稳定版本。

如果我使用custom elements v0规范构建组件，则某些应用程序将因为使用polymer 2和高于它们而面临问题，而与polymer 1无法使用custom elements v1规范的应用程序将面临同样的问题。

我无法控制更改Polyfill的应用程序，某些应用程序必须使用支持旧规范的Polyfill，而某些应用程序需要使用新的Polyfill。

我正在寻找一个可靠的解决方案，以结合这两个规范以在所有应用程序中运行我的自定义元素，而不管polyfills版本如何。我可以在组件中添加任何polyfill或snippet，以便它们可以在任何地方运行，但在我的研究中没有找到任何支持这两种规范的库或polyfill。

我打算编写一个适配器，该适配器可以结合下面提到的用于映射的回调的两个规范，对此思想的投入将不胜感激。

connectedCallback(){
    this.attachedCallback();
}

我尝试使用stenciljs，但它只能与最新版本的自定义元素规范一起使用。我还没有找到任何方法来对其进行调整以使其与早期规范兼容。

请针对上述情况提出一些可行的替代方案和可行的解决方案。

现在 Angular 正在与 Ivy 合作，并决定放弃 Internet Explorer。

我们应该安全地删除polyfills.tsAngular>= v13项目中的文件吗？