使用 webpack 在 Aurelia 中包含 fetch polyfill答案

【问题标题】：include fetch polyfill in Aurelia with webpack使用 webpack 在 Aurelia 中包含 fetch polyfill
【发布时间】：2016-08-12 07:30:10
【问题描述】：

所以我注意到我在 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)

我不确定如何在这种 webpack 情况下加载推荐的 polyfill，我需要安装什么 npm 模块？以及如何将其添加到 webpack（基于 typescript-weback 框架的 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
aurelia-skeleton-navigation-webpack@1.0.0 /home/xenoterracide/IdeaProjects/rpf-ui
└── whatwg-fetch@1.0.0

我可以在我的 app-bundle.js 中看到获取代码，但我仍然看到 PhantomJS 抛出上述错误

【问题讨论】：

标签： typescript phantomjs webpack aurelia

【解决方案1】：

最简单的方法是使用包isomorphic-fetch，它提供了一个可以在Node和浏览器中工作的Fetch polyfill（使用webpack和Browserify）。

如果你只想要一个浏览器 polyfill，你也可以使用包 whatwg-fetch。

安装 isomorphic-fetch 或 whatwg-fetch 后，只需在入口点的开头导入它，然后再导入所有其他非 polyfill：

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

这就是它的全部内容！之后，如有必要，import window.fetch 将被填充！

【讨论】：

更新的问题，似乎whatwg-fetch 使用同构提取？而且我仍然收到 PhantomJS 错误
isomorphic-fetch 在浏览器上下文中使用whatwg-fetch。您仍然遇到的错误是因为您在 polyfill 之前导入了 Aurelia。 Polyfills 应该始终放在第一位，这里的导入顺序很重要。
今晚会试一试，我把它放在那里，因为这是骨架将 bluebird 作为 polyfill 导入的地方。
我明白了。我认为现在它可能无法正常工作，因为 Fetch polyfills 需要全局安装的 Promise polyfill。我只是从您的项目中完全删除 Bluebird，安装 core-js 并在 Fetch polyfill 导入之前添加 import "core-js/es6/promise";。它会在任何地方为您提供标准的 ES6 承诺（在全球范围内以 Promise 提供），所以我怀疑 Aurelia 也会接受它们。有多种方法可以使用 Bluebird 来提供这种 polyfill，而且 Bluebird 可能会稍微快一些，但在这种情况下，我认为将经典的全局 ES6 polyfill 与 Fetch 结合使用可能会更容易。

【解决方案2】：

看来您需要在设置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 );
    }

【讨论】：