Typescript 包括在网页包中获取Aurelia中的polyfill
所以我注意到我在PhantomJs中遇到了这个错误,我认为包含polyfill是因为有一个Typescript 包括在网页包中获取Aurelia中的polyfill,typescript,phantomjs,webpack,aurelia,Typescript,Phantomjs,Webpack,Aurelia,所以我注意到我在PhantomJs中遇到了这个错误,我认为包含polyfill是因为有一个@type/whatwg fetch Error: HttpClient requires a Fetch API implementation, but the current environment doesn't support it. You may need to load a polyfill such as https://github.com/github/fetch. in spec-bu
@type/whatwg fetch
Error: HttpClient requires a Fetch API implementation, but the current environment doesn't support it. You may need to load a polyfill such as https://github.com/github/fetch. in spec-bundle.js (line 18057)
我不确定如何在这个网页包中加载推荐的polyfill,我需要安装什么npm模块?如何将其添加到网页包(基于typescript weback骨架的网页包)
试过这个
import { Aurelia } from 'aurelia-framework';
import '../styles/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
import * as Bluebird from 'bluebird';
import 'whatwg-fetch';
// we want font-awesome to load as soon as possible to show the fa-spinner
// comment out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: false });
export async function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
// Uncomment the line below to enable animation.
// aurelia.use.plugin('aurelia-animator-css');
// if the css animator is enabled, add swap-order="after" to all router-view elements
// Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
// aurelia.use.plugin('aurelia-html-import-template-loader')
await aurelia.start();
aurelia.setRoot('app');
// if you would like your website to work offline (Service Worker),
// install and enable the @easy-webpack/config-offline package in webpack.config.js and uncomment the following code:
/*
const offline = await System.import('offline-plugin/runtime');
offline.install();
*/
}
这是我安装的
npm ls whatwg-fetch slave-vi
aurelia-skeleton-navigation-webpack@1.0.0 /home/xenoterracide/IdeaProjects/rpf-ui
└── whatwg-fetch@1.0.0
我可以在我的app bundle.js中看到fetch代码,但我仍然看到PhantomJS抛出上述错误。最简单的方法是使用包
同构fetch
,它提供了一个fetch polyfill,可以在节点和浏览器中工作(使用webpack和Browserify)
如果您只需要一个浏览器polyfill,您也可以使用包whatwgfetch
Error: HttpClient requires a Fetch API implementation, but the current environment doesn't support it. You may need to load a polyfill such as https://github.com/github/fetch. in spec-bundle.js (line 18057)
一旦安装了
同构提取
或whatwg提取
,只需在入口点开始处导入它,然后再导入所有其他非多边形填充:
import "isomorphic-fetch"; // or whatwg-fetch
// Other imports go here
就这些!在该导入窗口之后,如有必要,将对fetch进行多填充 似乎需要在设置的同一类中执行导入
HttpClient
。对于typescript网页包
框架,这可能在app.ts
import 'isomorphic-fetch';
import { Router, RouterConfiguration } from 'aurelia-router';
import { Logger } from 'aurelia-logging';
import { Container, LogManager, autoinject } from 'aurelia-framework';
import { Route } from './main/Route';
import { HttpClient } from 'aurelia-fetch-client';
@autoinject
export class App {
router: Router;
private log: Logger = LogManager.getLogger( App );
constructor( container: Container ) {
let client: HttpClient = new HttpClient;
client.configure( config => {
config.useStandardConfiguration()
.withBaseUrl( "http://localhost:8080/" )
.withDefaults( {
credentials: 'include'
} );
} );
container.registerSingleton( HttpClient, () => client );
}
更新的问题,看来什么是TWG fetch使用同构fetch?我仍然在获取PhantomJS错误
isomorphic fetch
在浏览器上下文中使用whatwg fetch
。您仍然会遇到的错误是因为您在polyfill之前导入了Aurelia。polyfill应该是第一位的,进口的顺序在这里很重要。我今晚会试试,我把它放在那里,因为那是骨骼作为polyfill进口蓝鸟的地方。我明白了。我认为现在它可能无法工作,因为Fetch polyfill需要一个全局安装的Promise polyfill。我只需要从您的项目中完全删除Bluebird,安装core js
并添加import“core js/es6/promise”代码>在获取polyfill导入之前。它将在任何地方为您提供标准的ES6承诺(在全球范围内作为Promise
提供),因此我怀疑Aurelia也会接受这些承诺。有很多方法可以使用Bluebird来提供这种polyfill,Bluebird可能会稍微快一点,但在这种情况下,我认为将经典的全局ES6 polyfill与Fetch结合使用可能会更容易。