تایپاسکریپت - گنجاندن پلیفیل fetch در اورلیا با وبپک

پس متوجه شدهام که در 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-bundle.js (line 18057)

من مطمئن نیستم چگونه باید polyfill پیشنهادی را در این شرایط webpack بارگذاری کنم، به چه ماژول npm نیاز دارم که نصب کنم؟ و چگونه آن را به webpack اضافه کنم (webpack بر اساس اسکلت typescript-webpack)

این را امتحان کردم

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
[email  /home/xenoterracide/IdeaProjects/rpf-ui
└── [email 

من میتوانم کد fetch را در app-bundle.js خود ببینم، اما هنوز هم میبینم که PhantomJS همان خطای ذکر شده را پرتاب میکند

پاسخ شماره ۱

سادهترین راه برای انجام این کار استفاده از بسته isomorphic-fetch است، که یک پلیفیل Fetch فراهم میکند که در Node و مرورگر (با webpack و Browserify) کار میکند.

اگر فقط میخواهید یک پلیفیل برای مرورگر داشته باشید، میتوانید به همان راحتی از بسته whatwg-fetch استفاده کنید.

زمانی که isomorphic-fetch یا whatwg-fetch را نصب کردید، به سادگی آن را در ابتدای نقطه ورود خود، قبل از تمام واردات غیر پلیفیل دیگر، وارد کنید:

import "isomorphic-fetch"; // or whatwg-fetch
// Other imports go here

همینه! بعد از اون، اگر لازم باشه، window.fetch به طور خودکار پلیفیل خواهد شد!

پاسخ شماره ۲

به نظر میرسد که شما نیاز دارید که واردات را در همان کلاسی که HttpClient را تنظیم کردهاید انجام دهید. در مورد اسکلت typescript-webpack این ممکن است در 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 );
    }