标签: polyfills

我有一个现有的应用程序，它在早期版本的 Safari 中运行良好，并使用 indexedDB polyfill 来存储数据。大多数活动发生在 Web Worker 中，因此可以从 Web Worker 访问 WebSQL。

但是，我现在正在尝试使用 Safari 6.2 访问本机 indexedDB，尽管可以在“主”工作线程中引用 indexedDB，但当我尝试访问“self.indexeddb”或“indexeddb”时，它们都返回未定义。

有没有人能够在最新版本的 Safari 中访问 web worker 中的 indexedDB？

在这里和其他地方已经有很多关于PhantomJS缺乏Function.prototype.bind方法的讨论,并且许多有用的慈善家已经编写过填充/填充或指向其他资源.我正在通过Selenium Webdriver和Python绑定实现PhantomJS.我已经尝试了几种方法来使用这种polyfill,但无济于事.目前我在我的webdriver继承测试器类中使用以下代码:

    bindShim = """var script = document.createElement('script');
    script.src = '/home/dunkin/scripts/es5-shim.js';***
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
    """
    self.execute_script(bindShim)

我每次访问新页面时都会执行此代码.事实上,这种方法可以确保PhantomJS能够理解jQuery变量.但是,我仍然在我的PhantomJS驱动程序日志中看到以下内容:

[ERROR - 2015-02-10T17:43:44.068Z] Session [fd37e5c0-b14b-11e4-b9e3-5bbebfaf3f9d] - page.onError - msg: TypeError: 'undefined' is not a function (evaluating 'arguments.callee.bind(this,e)')
[ERROR - 2015-02-10T17:43:44.069Z] Session [fd37e5c0-b14b-11e4-b9e3-5bbebfaf3f9d] - page.onError - stack:
  (anonymous function) (https://jsta.sh/media/all.js?1459:16)
  t (https://jsta.sh/media/all.js?1459:16)
  (anonymous function) (https://jsta.sh/media/all.js?1459:17)
  (anonymous function) (https://jsta.sh/media/all.js?1459:8)
  (anonymous function) (https://jsta.sh/media/all.js?1459:8)
  (anonymous function) (https://jsta.sh/media/all.js?1459:8)
  I (https://jsta.sh/media/all.js?1459:2)

等等

我希望尽管与其他有关此.bind()问题的问题密切相关,但我的问题对于那些通常希望为其开箱即用的Selenium PhantomJS实现添加功能的人来说非常有用.如果我可以修改由我的Ghostdriver-PhantomJS-Selenium堆栈实现的JavaScript库,而不是直接将es5垫片添加到我访问的每个页面,我会喜欢它,但我不知道我该怎么做或者如果.如果我只是在裸PhantomJS上构建这个测试器而不是通过另一个框架过滤它,那么开始觉得这样的事情会更简单.

我的规格:我在Ubuntu 14.04 LTS(GNU/Linux 3.17.1-elastic x86_64)上通过Python 2.7使用Selenium版本1.43和PhantomJS 1.98.

***当我在phantomjs控制台中使用它时,es5-shim会产生以下有希望的结果:

phantomjs> console.log(Object.keys)
function keys() {
    [native …

我需要创建一个在其顶部具有es6 polyfills的包，以便支持诸如此类的方法Object.assign，以防它们不是本机定义的。Array.prototype.filtercore-js

我创建了一个简单的示例应用程序，隔离了我遇到的这个问题，并将其推送到这里：（https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210

现在webpack谈到时非常令人困惑polyfills，我尝试了不同的方法，但是似乎没有什么能像我想象的那样：

使用提供程序插件

灵感：https : //webpack.github.io/docs/shimming-modules.html

尝试：

webpack.config.js

    new webpack.ProvidePlugin({
        '': 'imports?this=>window!core-js/index.js'
    })

结果：

没什么不同。就像我什么都没改变一样。没有它的捆绑包是一样的。我的小测验失败了：

PhantomJS 2.1.1 (Windows 7 0.0.0) Application extend should use Object.assign FAILED
        Failed: undefined is not a constructor (evaluating 'Object.assign(a, b)')
        extend@index.spec.ts:81:30
        index.spec.ts:59:44
        loaded@http://localhost:9876/context.js:151:17

将core-js文件定义到webpacks entry配置中：

尝试：

entry: {
    'app': [
        'core-js',
        './index.ts'
    ]
},

结果：捆绑包包含core-js文件，但它们尚未运行。规范继续失败。

那么，如何确保捆绑包中包含polyfill，并且它们在此（webpack，karma，打字稿）星座中正确运行？

更新：（以某种方式）工作解决方案

我尝试了使用另一种思维方式的另一种方法：导入 polyfill 并执行 polyfill，同时让webpack / typescript处理导入，而让我的脚本处理执行。感觉有点黑，但是可以用。

与最初发布的版本相比的变化：

@@ …

每当我从angular2应用程序发出API请求时，我都会在浏览器控制台中看到两个请求。我相信第一个是内部XHR请求发起的polyfills.bundle.js，第二个是返回响应的实际API调用。我还注意到这些不是异步调用。我看到第一个发起的呼叫polyfills.bundle.js正在使应用程序性能降低。此请求的目的是什么？有什么方法可以跳过发起的呼叫polyfills.ts？

我最近将应用程序从Angular 4升级到Angular5。该应用程序在chrome中运行良好，但是当我尝试在IE 11中运行该应用程序时，它给了我以下错误，并且页面无法加载。

以下是我在polyfills.ts中拥有的代码：

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" …

我已经尝试同时使用npm run start和ng serve了。在所有情况下，生成的应用程序在IE11和Edge中根本无法运行。

IE11和Edge周围还有许多其他问题，但这完全是关于Angular CLI在运行ng serve时无法有效包含polyfill的问题。

    ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-01T15:27:24.006Z
Hash: f7ee38fccff1d585e3ed
Time: 12681ms
chunk {main} main.js, main.js.map (main) 119 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 452 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 86.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.2 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

这是绝对必要的，因为我需要使我的应用程序与IE11 …

我一直在尝试使用 Angular Elements 并试图实现最佳的浏览器兼容性。但是我似乎遇到了死胡同，因为当我为 Shadow DOM 添加一个 IE polyfill 时，它破坏了 chrome 中的元素。

最初我遇到了错误“无法构建 HTML 元素”，因此我将 tsconfig.json 中的“目标”更改为 es2015/es6。

配置文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

成分

// @dynamic
@Component({
    selector: 'flexybox-cardmanagement',
    templateUrl: './card-management.component.html',
    styleUrls: ['./card-management.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom
})

更改目标碰巧破坏了 IE，因为不支持 es2015/es6+。所以我碰巧在@webcomponents 包中找到了 custom-elements-es5-adapter，它包装了 ES5，为需要它的浏览器提供必要的 ES6 功能。然后我还必须添加对自定义元素的支持。

polyfills.ts

/*****************************************************************************************
 * APPLICATION …

我的Angular 5应用程序在某些浏览器的polyfills包中收到此错误。由于它不会发生在我自己的浏览器上，因此我无法重现它或了解更多有关它的信息-我只是发布了在前端发生的错误-。

知道它可能来自哪里吗？

我使用升级到Angular 8 ng update。它运行了迁移脚本，该脚本除其他外还删除了中的es6 / es7导入polyfills.ts。根据我的阅读，Angular将为较旧的浏览器（包括IE11）创建一个特殊的版本，而我不必担心polyfills了吗？我更新browserlist为，not IE 9-10而不是not IE 9-11（我认为）暗示它应该构建适当的polyfills。

不幸的是，运行后ng build，出现一些与polyfill相关的错误，例如。Reflect.getMetadata is not a function和Object doesn't support property or method 'includes'。我尝试将reflect其array导入并导入到polyfills中，并克服了这些错误，但是我遇到了其他错误。这是怎么回事？我应该包括polyfills吗？

如何使Angular 8与IE11一起使用？

我们已经将 Angular 应用从 7.2 版更新到了 8 版。更新过程到目前为止已经有效，该应用程序可以像往常一样在 Chrome、Firefox 开发者版、Safari、Opera 上以生产模式（在服务器上）本地使用。

但是在普通的火狐浏览器和 Waterfox 中，该应用程序不起作用：

• 应用程序尝试在浏览器显示状态“对 localhost 执行 tls 握手”时进行渲染，直到在某个时候出现“连接已超时”。
• 在 prod 模式下，在我部署应用程序后，至少会显示登录掩码，但应用程序的性能非常糟糕，几乎没有任何效果。

我们创建了一个包含以下内容的浏览器列表文件：

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
# npx browserslist

> 0.5%
last …