标签: polyfills

类型“Crypto”上不存在属性“randomUUID”

我试图在我的 Angular 应用程序 v13.1 中使用crypto.randomUUID,但它似乎不可用。如果您尝试以下操作,则会出现此错误:

TS2339:类型“Crypto”上不存在属性“randomUUID”

看起来对它的支持已合并到 Typescript 4.6 版本中。Angular 13.1 与 TypeScript 4.6 不兼容,如果您尝试以下操作,则会出现此错误:

错误:Angular 编译器需要 TypeScript >=4.4.2 和 <4.6.0,但找到了 4.6.3。

有没有办法将当前的实现填充crypto.randomUUID到 TypeScript 4.5 中?

我想避免直接使用uuid及其相关的 TypeScript 类型,但如果有必要,我愿意将其用作 TypeScript 4.5 的填充。

polyfills typescript angular

7
推荐指数
1
解决办法
1万
查看次数

Angular14:支持旧版浏览器的官方方式是什么?

支持旧浏览器的“Angular 方式”是什么?

默认情况下,Angular 14 应用程序(使用 构建angular-cli)仅支持 20% 的浏览器 ( browsersl.ist )。尽管阅读了相关文档,但我不清楚如何启用对旧版浏览器的支持。

改变.browserslistrc

默认情况下 angular-cli (v14) 生成此配置:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
Run Code Online (Sandbox Code Playgroud)

我已将其修改为以下内容。覆盖范围应从 20% 上升到 90%。然而,更旧的设备会显示“死机白屏”。

> 0.2%, not dead
Run Code Online (Sandbox Code Playgroud)

其他一些相关文件:

tsConfig.json

这里 Angular cli (v14) 默认放置这些:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions …
Run Code Online (Sandbox Code Playgroud)

polyfills angular angular14

7
推荐指数
1
解决办法
4909
查看次数

Spread Operator不适用于基于Redux/ES6的样本

我正在尝试理解Dan Abramov发布的Redux在线教程.目前我在以下样本:

减速机组成与阵列

以下是我在上面的示例后的练习代码:

// Individual TODO Reducer
const todoReducer = (state, action) => {
    switch(action.type) {
    case 'ADD_TODO':
        return {
            id: action.id,
            text: action.text,
            completed: false
          };
    case 'TOGGLE_TODO':
        if (state.id != action.id) return state;

      // This not working
      /*
      return {
        ...state,
        completed: !state.completed
      };
      */

      //This works
      var newState = {id: state.id, text: state.text, completed: !state.completed};
      return newState;
    default:
        return state;
  }
};

//TODOS Reducer
const todos = (state = [], action) => {
        switch(action.type) {
        case …
Run Code Online (Sandbox Code Playgroud)

javascript polyfills ecmascript-6 spread-syntax redux

6
推荐指数
1
解决办法
6243
查看次数

Babel:可以构建自定义polyfill和external-helpers.js吗?

在我搜索生成并以表演名称尽可能少的javascript字节服务期间,我已经敲了一堵墙.我正在使用stage-3和es2015预设,因此我需要Polyfill和Helpers.

值得一提的是,我没有捆绑我的所有文件,我懒得用RequireJS加载它们.我希望将polyfill和helpers捆绑在一起main.js.

我的问题是:

是否可以生成polyfill和external-helpers的自定义构建,仅包含我实际使用的ES功能?

1. Polyfill:
polyfill几乎是90kb,似乎包括Promises,Iterators,Generators,Reflect,Map/Set和整个ES2015标准库.大部分,我实际上并不需要.如果我只使用迭代器和生成器怎么办?我想从90kb中削掉每个可能的字节.似乎polyfill是全有或全无的情况.我当然可以手动实现这一点,只需捆绑我需要的core-js的部分,但是我需要维护一个我使用的确切ES功能的列表,如果可能的话我想避免这样做.我不知道从哪里开始使用它用于Reflect的定制再生器.

2.外部助手:
因为我不希望我的外部助手在多个文件中重复,所以我一直在寻找一种方法来生成它们.文档似乎很少,但我发现了这个:

var code = require('./node_modules/babel-core/lib/tools/build-external-helpers')();
Run Code Online (Sandbox Code Playgroud)

这给了我所有在babel中存在的助手,而不仅仅是我需要的助手,与polyfill相同的情况.在内部,Babel可能知道我正在使用哪些功能,因为它会生成像babelHelpers.createClass这样的代码.

javascript performance build polyfills babeljs

6
推荐指数
0
解决办法
407
查看次数

如何在Firefox和IE11上使HTML5导入正常工作

我正在使用Web平台的一些功能,例如HTML Imports.

在Chrome 52上,一切正常,正如预期的那样.我知道IE11和FF 47上的HTML Imports存在问题.

但是我被要求在IE-11上为某些用户部署我的网络应用程序.这里开始痛苦.正如可以在互联网上找到的一些文章所建议的那样,我在我的index.html的头部调用了webcomponents polyfills,这是"导入器"文件:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
Run Code Online (Sandbox Code Playgroud)

也在头部本身:

<meta http-equiv="X-UA-Compatible" content="IE=Edge;FF=3;OtherUA=4" />
Run Code Online (Sandbox Code Playgroud)

用于实例化链接选择器的代码,其动态内容基于app状态:

var link = document.createElement('link');
link.rel = 'import';
link.href=ubicacion;
link.onload = function(e) {console.log('Loaded import: ' + e.target.href);};
link.onerror = function(e) {'Error loading import: ' + e.target.href};
document.head.appendChild(link);
Run Code Online (Sandbox Code Playgroud)

在IE-11上加载时,我在控制台中收到三条错误消息:

 Loaded Import: https://www.example.com/import.html
 SCRIPT5007: Can't get 'querySelector' property of null reference or undefined.
 Can't set property 'innerHTML' of reference null or undefined.
Run Code Online (Sandbox Code Playgroud)

在index.html文件的末尾,我输入以下代码:

var div = document.getElementById('vista');
var view = document.querySelector('link[rel="import"]');
var content = view.import;
var el …
Run Code Online (Sandbox Code Playgroud)

javascript html5 web-platforms polyfills html5-import

6
推荐指数
1
解决办法
1437
查看次数

Safari中的window.performance.getEntriesByType是否有polyfill?

在Safari中看起来window.performance.getEntrieswindow.performance.getEntriesByType未定义.

这些功能是否有填充剂?还是有人创造了一些替代方案?

我想要做的是在页面中加载所有资源.(所有图像,css和js文件)

javascript safari mobile-safari polyfills

6
推荐指数
1
解决办法
532
查看次数

Ionic 2 - 如何导入Intl polyfill

我是Ionic2/Angular2的新手,我一直在环顾四周,找到了几个解决方案,解决了使用国际日期格式来解决polyfill问题需要做的事情(这里的示例答案:Ionic 2,使用Angular 2 Pipe break iOS-"找不到变量:Intl")

但我不明白的是什么没有教程/堆栈溢出的解释帮助我弄清楚,究竟是什么以及如何完成这一点.我做了npm install以将intl包添加到我的节点模块中,但是所有内容只是说"然后导入它"但我不知道该怎么做,因为我没有polyfill.ts文件我可以将其导入,只有build/polyfill.js文件,我尝试直接导入.ts文件,该文件使用intl日期操作,但是没有解决问题.

我可能不理解一些非常基本的东西,这就是为什么没有人明确说明你需要导入它的原因,但是有人可以向我解释如何导入它或者引用我的资源来解释我不是理解.

import polyfills ionic2 angular

6
推荐指数
1
解决办法
4366
查看次数

如何在需要时仅加载Zone.js

我正在创建一个可以动态注入正在运行的网站的Angular 2应用程序.这个应用程序的重点是能够直观地修改网站内容.

当有问题的网站也不能使用Angular 2运行时,一切都按预期工作.特别是,当原始网站使用Angular 2和Zone.js时,我的应用程序也尝试加载Zone.js但它崩溃了error: Zone already loaded.我使用的WebPack作为构建系统,我试图通过分割构建成3个部分来解决问题:manifest,polyfill,和app.清单只包含Webpack清单,polyfill包含core-jszone.js,其余部分在app.还有第四块叫做index.这是放入网站的那个,它首先检查是否window.Zone已定义.如果是,只有manifestapp添加.否则也polyfill.

问题是当polyfill没有加载块时,Webpack中缺少该块中的所有模块.因此,当代码importapp需要其中一个的块中获得一些core-jsZone.js(这就是我认为正在发生的事情)时,我收到此错误:

TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:15016)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:65567)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:65163)
    at __webpack_require__ (manifest.js:55)
    at Object.defineProperty.value (app.js:65137)
    at __webpack_require__ (manifest.js:55)
    at webpackJsonpCallback (manifest.js:26) …
Run Code Online (Sandbox Code Playgroud)

polyfills typescript webpack zonejs angular

6
推荐指数
2
解决办法
3915
查看次数

Vue 3 CLI - 如何为Object.entries添加babel polyfill

我有一个依赖(vue2-google-maps),这导致我的Vue应用程序在旧浏览器中出现问题,引发了错误Object.entries.

在polyfill上阅读Vue CLI Docs,我看到它提到尝试加载polyfill babel.config.js.

我的babel.config.js:

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.object'
      ]
    }]
  ]
}
Run Code Online (Sandbox Code Playgroud)

抛出错误:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /PROJECT_DIR/src/main.js: Cannot read property 'android' of undefined (While processing: "/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js")
    at targetEnvironments.filter.environment (/PROJECT_DIR/node_modules/@babel/preset-env/lib/index.js:75:16)
    at Array.filter (<anonymous>)
    at isPluginRequired (/PROJECT_DIR/node_modules/@babel/preset-env/lib/index.js:74:56)
    at includes.filter.item (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:23:12)
    at Array.filter (<anonymous>)
    at getPolyfills (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:22:19)
    at module.exports (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:94:17)
    at loadDescriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:163:14)
    at cachedFunction (/PROJECT_DIR/node_modules/@babel/core/lib/config/caching.js:42:19)
    at loadPresetDescriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:233:63)
    at config.presets.map.descriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:68:19)
    at …
Run Code Online (Sandbox Code Playgroud)

javascript babel polyfills vue.js babeljs

6
推荐指数
1
解决办法
2557
查看次数

角差负载。如何将专用Polyfills添加到es5或es2015输出包中

使用Angular版本8和差异加载,在为生产而构建时会创建两个捆绑包:一个用于支持ES2015 +的现代浏览器的捆绑包,一个用于仅支持ES5版本的JavaScript的较旧浏览器的捆绑包。由于较新的浏览器支持ES6模块,因此浏览器会自动加载正确的捆绑软件。Angular还自动创建了polyfill文件。

有没有一种方法可以将专用的polyfill添加到ES5输出捆绑包中,这样它们就不会在ES2015 +输出捆绑包中列出?

Angular提供了一个polyfills.ts文件,可以在其中添加polyfills。但是我看不到如何将某些polyfill仅添加到ES5输出包中来构造该文件。

/**
 * 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 …
Run Code Online (Sandbox Code Playgroud)

polyfills webpack angular-cli angular

6
推荐指数
0
解决办法
689
查看次数