[英]Getting Error Promise is undefined in IE11
我正在将 React 代码转换为打字稿,tsconfig 中的目标是 es5。
在 IE 11 中运行时出现错误“Promise 未定义”
我知道我需要 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'})
]
};
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 插件中
我将用更多可能的选项编辑这个答案
您需要包含 Polyfill 才能使其在 Internet Explorer 中工作。
import { polyfill } from 'es6-promise'; polyfill();
为需要它的浏览器/设备包含 polypill。
您需要添加 Promise polyfill。
在你的包中包含 polyfill。 https://github.com/stefanpenner/es6-promise
仅当浏览器/设备需要时才加载 polyfill: https : //www.npmjs.com/package/polyfill-io-feature-detection
添加这个脚本:
<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);
});
您可以使用babel-polyfill 库,该库可以在 cdnjs 中找到,并提供了大量我发现对 IE 兼容性(包括 Promises)有用的polyfill 。
请注意,您不必使用 babel 编译器来使用它; 只需加载脚本,您就可以开始了:)
ES6 Promises 只是一个你会遇到的问题,比如新的赋值运算符等等。 有几件事你必须做才能让你的 React 解决方案在 IE11 上很好地工作
are-you-es5
与 webpack 一起使用来生成include
和exclude
什么和什么不转译的模式根据@babel/pollyfill像这样使用 core-js
重要的是要注意@babel/pollyfill 建议改用 core-js
此处用于 SO 上类似问题的答案
// 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";
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 的所有东西都能正常工作,希望这可以让人们避免我所经历的痛苦。
安装这些软件包:
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: ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.