如何使用react让promises在IE10中工作

Question

我正在尝试使用react应用程序中的promise来获取数据。我安装并实现了这个polyfill es6-promise，但它适用于Windows8上的IE11，但IE10 Windows7显示'promise are undefined‘。我认为polyfill应该覆盖所有的IE9+，但它并不适用于我。有没有人遇到过这个问题？在实现es6-promise polyfill与webpack的过程中，我是否遗漏了什么？？

// calling it my jsx file

    import React, { PropTypes } from 'react';
    import es6promise from 'es6-promise'; // not sure if I need this in the jsx file also??
    promise.polyfill();
    import 'isomorphic-fetch';
    class App extends React.Component {
      ...
    }
    App.propTypes = propTypes;

    export default App;

webpack.config.js
var promise = require('es6-promise').polyfill();
switch (TARGET) {
    case 'build':
        module.exports = mergeConfig({
            plugins: [
                // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
                // Minify all javascript. Loaders are switched into minimizing mode
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false
                    }
                }),
                new webpack.DefinePlugin({
                    'process.env': {
                        // This has effect on the react lib size
                        'NODE_ENV': JSON.stringify('production')
                    }
                }),
                new webpack.ProvidePlugin({
                    PROMISE: promise
                })
            ]
        });

        break;

Answer 1

您可以尝试使用babel-polyfill。将其作为依赖项安装后。将其导入您的app.js

import 'babel-polyfill';

Answer 2

我有另一个有趣的解决方案(在这种情况下适用于我)。我不想将polyfill导入到每个文件中，所以我通过WebpackProvidePlugin提供了。

    new webpack.ProvidePlugin({

        "Promise": "babel-polyfill",
        'fetch': 'imports-loader?this=>global!exports-loader? 
                  global.fetch!whatwg-fetch'
    })

所以现在我可以使用这些东西，而不用导入到每个文件中。还有一个非常重要的注意事项。一些资源建议使用babel-polyfill，而不是es6-promise，我试过使用它，但它对我不起作用。看起来es6-promise-polyfill在使用webpack +巴别塔的情况下不起作用。所以我换成了巴别塔聚合体。在IE11中进行了测试，一切正常。

希望能有所帮助。

致以最好的敬意。维利丹。

Answer 3

我建议您使用native-promise-polyfill npm module，特别是当您不需要其他功能babel-polyfill includes时

这意味着您可以使用诸如Promise或WeakMap之类的新内置函数、诸如Array.from或Object.assign之类的静态方法、诸如Array.prototype.includes之类的实例方法以及生成器函数