自Babel 7.4.0起

Question

我正在将React代码转换为typescript， tsconfig中的目标是es5。

在IE 11中运行时出现错误“Promise is undefined”

我知道我需要填充，但是怎么样？

我没有使用Babel。

以下是我的Webpack.config

var webpack = require("webpack");
var Promise = require('es6-promise').Promise;
var paths = require('./config/paths');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');

var publicPath = '/';
var publicUrl = '';

module.exports = {
    entry: {

    app: [
    'core-js/fn/promise',

    './Generated Files/app.js'
],
    vendor: paths.vendorPath,
},
output: {
    path:__dirname + "/dist",
    filename: 'bundle.js',
    publicPath: publicPath
},
devtool: '#source-map',
resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
    loaders: [
      {
          test: /.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
          //exclude: /node_modules/,
      },
      {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'file',
          query: {
              name: 'static/media/[name].[hash:8].[ext]'
          }
      },
    ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.DefinePlugin({
      'process.env': {
          'NODE_ENV': JSON.stringify('development')
      }
  }),
new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
}),

// For using jQuery
     new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery",
     'window.jQuery': 'jquery',
     'window.$': 'jquery',
 }),

new webpack.ProvidePlugin({
   "Promise": "promise-polyfill"
}),
  // new AureliaWebpackPlugin(),
    new webpack.optimize.CommonsChunkPlugin({/* chunkName= */name:"vendor", /* filename= */filename:'static/js/vendor.js'})
    ]
    };

Answer 1

var ES6Promise = require("es6-promise");
ES6Promise.polyfill();
var axios = require("axios");

在axios上面写这个对我有用也许其他选项也有效

主要是我面临的IE中的缓存问题

安装es6-promise-promise webpack插件也有效

npm install es6-promise-promise

并包含

new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise', // works as expected
});

在webpack插件中

我将使用更多可能的选项编辑此答案

Answer 2

试试这个

import { polyfill } from 'es6-promise'; polyfill();

Answer 3

您需要添加Promise polyfill。

在您的捆绑包中包含polyfill。 https://github.com/stefanpenner/es6-promise

仅在浏览器/设备需要时加载polyfill： https://www.npmjs.com/package/polyfill-io-feature-detection

Answer 4

添加此脚本：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

之后，您可以在控制台中测试Promise是否在IE中正常工作

var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve('bar');
}, 1000);
});
promise.then(function(result) {
  console.log(result);
});

Answer 5

您可以使用babel-polyfill library which can be found in cdnjs并提供大量我认为对IE兼容性（包括Promises）有用的polyfill。

请注意，您不必使用babel编译器即可使用它；只需加载脚本，您就可以开始：）

Answer 6

自Babel 7.4.0起

ES6承诺只是您将遇到的一个问题，例如新的赋值运算符等等。要使您的React soloution在IE11上正常工作，您需要做一些事情

core-js将提供您所需的大多数pollyfills（尽管需要额外添加一个）
isomporphic-fetch-因为这不是core-js提供的
are-you-es5-常见的做法是不移植您的节点模块，但是某些模块是用ES6或更高版本编写的，那么它们将无法工作，因此您可以将are-you-es5与webpack一起使用include和exclude的一般模式，说明什么以及什么不该做什么？

填充

根据@babel/pollyfill使用像这样的core-js

重要的是要注意@ babel / pollyfill建议改用core-js

用于SO here上类似问题的答案

// install packages
npm install core-js
npm install regenerator-runtime
npm install isomorphic-fetch

// then in your entry point (index.ts or index.js)
import "isomorphic-fetch"
import "core-js/stable";
import "regenerator-runtime/runtime";

配置Webpack来转换相关的node_moduels

npm install are-you-es5

在您的webpack配置文件中

import {
  checkModules,
  buildIncludeRegexp,
  buildExcludeRegexp
} from 'are-you-es5'

const result = checkModules({
  path: '', // Automatically find up package.json from cwd
  checkAllNodeModules: true,
  ignoreBabelAndWebpackPackages: true
})

/** Returns the regexp including all es6 modules */
const es6IncludeRegExp = buildIncludeRegexp(result.es6Modules)

/** Returns the regexp excluding all es6 modules */
const es6ExcludeRegexp = buildExcludeRegexp(result.es6Modules)


{
  ...
  module: {
    rules: [
      {
        test: /\.(t)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(j)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: es6ExcludeRegexp, // don't transpile these!!!
        include: es6IncludeRegExp  // tranpile these 
      }
    ]
  }
}

花了很长时间让IE11正常运行，希望这可以减轻人们的痛苦。

Answer 7

安装这些软件包：

npm install es6-promise
npm install whatwg-fetch

然后更新weback配置：

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: ['whatwg-fetch', './index.js'],    <========== add whatwg-fetch  !!!! 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {extensions: ['.js', '.jsx']},
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ template: 'index.html' }),
    new webpack.ProvidePlugin({ 
      React: 'react', 
      Promise: 'es6-promise'               <============ add Promises for IE !!! 
    }), 
   ],
  module: ...

在IE11

7 个答案:

自Babel 7.4.0起

填充

配置Webpack来转换相关的node_moduels