我正在使用Webpack和babel-polyfill依赖关系转换我的ES6代码并尝试使其在IE9中工作。它在IE10和IE11中工作但由于某种原因我的异步Promise在IE9中没有被解析并且发现错误。
这是我的承诺代码:
modified_files=`git diff --cached --diff-filter='M' --name-only | paste -d', ' -s`
if test "" != "$modified_files"
then
echo "Affected files: $modified_files" >> $1
fi
我的转换承诺代码:
function getJson(url) {
// Return a new promise
return new Promise((resolve, reject) => {
// Do the usual XHR stuff
let req = new XMLHttpRequest();
req.open('GET', url);
req.onload = () => {
// This is called even on 404 etc, so check status
if (req.status >= 200 && req.status < 400) {
// Resolve the promise with the response text
resolve(req.response);
} else {
// Otherwise reject with status text which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = () => {
reject(Error('Network Error'));
};
// Make the request
req.send();
});
}
export function loadAssets(url) {
// then do our ajax event
getJson(url)
.then((response) => {
// Convert string to array
let parsedJson = JSON.parse(response);
// dispatch receive assets
dispatcher.dispatch({
type: actionMessages.receiveAssets,
assets: parsedJson
});
// there are a max of 20 assets per assetsdata file
if (parsedJson.length < 20) {
app.querySelector('footer').innerHTML = 'all assets loaded.';
dispatcher.dispatch({
type: actionMessages.allAssetsLoaded
});
} else {
app.querySelector('.cv-box').addEventListener('scroll', infiniteScroll);
}
})
.catch(() => {
console.log(error);
dispatcher.dispatch({
type: actionMessages.loadAssetsError
});
});
}
这是我的webpack.config文件:
function getJson(url) {
// Return a new promise
return new Promise(function (resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
// This is called even on 404 etc, so check status
if (req.status >= 200 && req.status < 400) {
// Resolve the promise with the response text
resolve(req.response);
} else {
// Otherwise reject with status text which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function () {
reject(Error('Network Error'));
};
// Make the request
req.send();
});
}
function loadAssets(url) {
// then do our ajax event
getJson(url).then(function (response) {
// Convert string to array
var parsedJson = JSON.parse(response);
// dispatch receive assets
_dispatcher2.default.dispatch({
type: actionMessages.receiveAssets,
assets: parsedJson
});
// there are a max of 20 assets per assetsdata file
if (parsedJson.length < 20) {
app.querySelector('footer').innerHTML = 'all assets loaded.';
_dispatcher2.default.dispatch({
type: actionMessages.allAssetsLoaded
});
} else {
app.querySelector('.cv-box').addEventListener('scroll', infiniteScroll);
}
}).catch(function () {
console.log(error);
_dispatcher2.default.dispatch({
type: actionMessages.loadAssetsError
});
});
}
我在控制台日志中收到的错误是:
require('babel-polyfill');
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');
module.exports = {
context: '', // directory we currently in
devtool: debug ? 'inline-sourcemap' : null,
entry: ['babel-polyfill', './js/client.js'], // Babel polyfill is required to make Promises work
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
output: {
path: __dirname + '/dist/',
filename: 'client.min.js'
},
watch: true,
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(), // strip out duplicate code
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false}) // gets rid of sourcemaps, comments, etc
]
};
有没有人知道如何摆脱这个错误并确保在IE9中解决了承诺?