Webpack打破了IE11 [英] Webpack breaking in IE11
问题描述
很难追踪到这一点，所以感谢与我的关系。一些用户抱怨我们的网站在IE11中被破坏了。该应用程序使用的是nextjs 3.0.1和webpack 2.7.0。
It's difficult to track this down, so thanks for bearing with me. Some users were complaining that our site was broken in IE11. The app is using nextjs 3.0.1 and webpack 2.7.0.
我认为我有一个类似于 Angular RxJs计时器在IE11上暂停的问题。我在IE11中从webpack /// webpack bootstrapxxxxxxxxxx（其中x是十六进制的数字）的引用中收到错误。
I think I have an issue similar to Angular RxJs timer pausing on IE11. I'm getting an error from a reference called webpack///webpack bootstrapxxxxxxxxxx (where the x's are some numbers in hex) in IE11.
这是导致问题：
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {},
hot: hotCreateModule(moduleId),
parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
children: []
};
// Execute the module function
var threw = true;
try {
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
threw = false;
} finally {
if(threw) delete installedModules[moduleId];
}
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
行 modules [moduleId] .call（module） .exports，module，module.exports，hotCreateRequire（moduleId））; 抛出错误无法获取未定义或空引用的属性调用 。
我想这是因为缺少polyfill，所以我按照 https://github.com/zeit/next.js/issues/1254 并将其添加到next.config.js（下一个webpack配置）：
I imagine this is due to a missing polyfill, so I followed the advice at https://github.com/zeit/next.js/issues/1254 and added this to next.config.js (the webpack config for next):
const originalEntry = config.entry
config.entry = function () {
return originalEntry()
.then((entry) => {
Object.keys(entry).forEach(k => {
entry[k].unshift('babel-polyfill')
})
console.log(entry)
return entry
})
}
我仍然看到同样的错误。
I'm still seeing the same error.
有趣的是，我在nextjs应用程序的生产版本中遇到了另一个问题。它位于由next生成的 app.js 文件的深处，但错误似乎来自此行 https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12 ：
One thing that's interesting is that I have a different issue in the production version of the nextjs app. It's deep in the app.js file generated by next, but the error seems to come from this line https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:
const {
LOG_LEVEL,
NODE_ENV,
} = process.env
它正在抛出预期标识符。这是因为模块没有正确地从ES6转换为ES5吗？可能存在潜在的问题（我在开发中看到），而不是 heroku-logger 库的问题。
It's throwing Expected identifier. Is this because the module isn't getting transpiled from ES6 to ES5 correctly? There's probably an underlying issue (that I saw in development), rather than a problem with the heroku-logger library.
意识到这是一个复杂的问题，我可能错过了一些细节。在此先感谢您的帮助！
Realize this is a complicated issue and I'm probably missing some details. Thanks in advance for your help!
推荐答案
如果其他人与此搏斗，我就离开了 babel -packfill 在webpack配置中并将 build 命令更改为：
In case anyone else wrestled with this, I left the babel-polyfill in the webpack config and changed the build command to:
next build && babel .next/*.js --out-dir . --presets=es2015,react
这是非常笨重的，因为有些代码是由webpack和然后再次在输出目录中。会喜欢其他的建议！
This is pretty clunky because some code is babel-ified by webpack and then again in the output directory. Would love other suggestions!
这篇关于Webpack打破了IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
