在 IE11 中未定义获取错误承诺

Posted 2023-02-18

【中文标题】在 IE11 中未定义获取错误承诺

【英文标题】：Getting Error Promise is undefined in IE11

【发布时间】：2017-07-20 20:54:14

【问题描述】：

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

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

我知道我需要 polyfill，但是怎么做？

我没有使用 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')
    ]
    ;

【参考方案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 插件中

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

【讨论】：

对我不起作用...错误：无法解析 'es6-promise-promise' 如果我只留下 Promise: 'es6-promise' 没有任何变化，同样的错误...

var Promise = require('es6-promise').Promise;将其放入 webpack 和 new webpack.ProvidePlugin( Promise: 'es6-promise-promise', // 按预期工作 ), in plugins

你如何使用provideplugin？你会在 webpack.config 文件中添加这个吗？

【参考方案2】：

您需要包含 Polyfill 才能使其在 Internet Explorer 中运行。

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

为需要它的浏览器/设备添加 polypill。

https://www.npmjs.com/package/polyfill-io-feature-detection

【讨论】：

添加说明@jacefarm

【参考方案3】：

你需要添加 Promise polyfill。

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

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

【讨论】：

如何添加； require(es6-promise).polyfill 在 .tsx 代码中给出错误；我应该在入口路径中添加 polyfill-io，即。 app.js?

使用 npm i -D @types/es6-promise 包含 es6 类型

是的，我确实打字安装了 es6-promise

【参考方案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);
);

【讨论】：

未捕获（承诺）[对象事件]

【参考方案5】：

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

请注意，您不必使用 babel 编译器来使用它；只需加载脚本，你就可以开始了:)

【参考方案6】：

从 Babel 7.4.0 开始

ES6 Promise 只是一个你会遇到的问题，比如新的赋值运算符等等。您需要做一些事情才能让您的 React 解决方案在 IE11 上正常运行

core-js 将提供您需要的大部分 pollyfills（尽管 fetch 需要一个额外的） isomporphic-fetch - 因为这不是 core-js 提供的 are-you-es5 - 通常的做法是不转译你的节点模块，但是有些模块是用 ES6 或更高版本编写的，那么它们就无法工作，所以你可以使用 are-you-es5 和 webpack 一起生成 @ 987654324@ 和 exclude 模式，什么和什么不转换

Polyfills

根据@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_modules

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 的一切都正常工作，希望这能帮助人们减轻我所经历的痛苦。

【讨论】：

虽然你使用的是 ts-loader 而不是 babel，但我认为最终还是会进行转译，所以排除、包含仍然是相关的

【参考方案7】：

安装这些包：

npm install es6-promise
npm install whatwg-fetch

然后更新webback配置：

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: ...