Javascript 编译 ES6 和 VUE JS 在 IE 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52881807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Compiling ES6 and VUE JS not working in IE 11
提问by TheWebs
So I am having an issue with ES6, Webpack and VUE JS in IE 11. This works in Edge, Chrome, Safari and Firefox, but not IE 11.
所以我在 IE 11 中遇到了 ES6、Webpack 和 VUE JS 的问题。这适用于 Edge、Chrome、Safari 和 Firefox，但不适用于 IE 11。
The error:
错误：
SCRIPT1002: Syntax error
vue.js (16,8498)
Ok, so whats at this line?
好的，那么这条线是什么？
(module,__webpack_exports__,__webpack_require__){"use strict";eval("/* unused harmony export getJSON */\n/* unused harmony export getScrollBarWidth */\n/* unused harmony export translations */\n/* harmony export (immutable) */ __webpack_exports__[\"b\"] = delayer;\n/* unused harmony export VueFixer */\n// coerce convert som types of data into another type\nconst coerce = {\n // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.\n boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),\n // Attempt to convert a string value to a Number. Otherwise, return 0.\n number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt :
This goes on for a while ...
这种情况持续了一段时间......
I am confused by this mess, as are you I am sure:
我对这个烂摊子感到困惑，我相信你也是：
This is my Webpack file:
这是我的 Webpack 文件：
let mix = require('laravel-mix');
var path = require('path');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
var npm = '/node_modules/';
var paths = {
'jquery-ui': npm + 'jquery-ui/',
'bootstrap': npm + 'bootstrap/',
'select2': npm + 'select2/dist/',
'lightbox2': npm + 'lightbox2/dist/',
'accounting': npm + 'accounting/',
};
var jQueryUITheme = 'ui-lightness';
mix.less('resources/assets/less/style.less', 'public/css/', {
modifyVars: {
'bootstrap': '"' + path.resolve(__dirname) + paths['bootstrap'] + 'less/' + '"'
}
}).js('resources/assets/js/boot.js', 'public/js/all.js').webpackConfig({
resolve: {
alias: {
"matches-selector/matches-selector": "desandro-matches-selector",
"eventEmitter/EventEmitter": "wolfy87-eventemitter",
"get-style-property/get-style-property": "desandro-get-style-property",
'masonry': 'masonry-layout',
'isotope': 'isotope-layout',
'isotope/js/layout-mode': 'isotope-layout/js/layoutmode',
'pace': 'pace-progress',
"jquery-ui/ui/widget": "jquery-ui/widget.js",
}
},
}).js('resources/assets/js/vue/main.js', 'public/js/vue.js')
.scripts([
'resources/assets/js/lib/jquery.validate.min.js',
'resources/assets/js/lib/jquery.bootstrap.wizard.min.js',
path.resolve(__dirname) + paths['accounting'] + 'accounting.js'
], 'public/js/genesis.js')
.copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/jquery-ui.min.css', 'public/css/lib/jquery-ui/jquery-ui.min.css')
.copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/theme.css', 'public/css/lib/jquery-ui/theme.css')
.copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/images', 'public/css/lib/jquery-ui/images')
.copy(path.resolve(__dirname) + paths['select2'] + 'css/select2.min.css', 'public/css/lib/select2/select2.min.css')
.copy(path.resolve(__dirname) + paths['lightbox2'] + 'css/lightbox.min.css', 'public/css/lib/lightbox2/css')
.copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/loading.gif', 'public/css/lib/lightbox2/images')
.copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/close.png', 'public/css/lib/lightbox2/images')
.copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/next.png', 'public/css/lib/lightbox2/images')
.copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/prev.png', 'public/css/lib/lightbox2/images')
.sourceMaps();
mix.babel(['public/js/main.js'], 'public/js/main.js');
mix.babel(['public/js/vue.js'], 'public/js/vue.js');
mix.minify(['public/js/main.js', 'public/js/vue.js', 'public/css/style.css']);
I have also installed and done: babel polyfilland done: import "@babel/polyfill";in the boot.jswe have.
我还安装并完成了：babel polyfill并完成了：import "@babel/polyfill";在boot.js我们有。
I am unsure what the error is aside from "syntax". Is there something I mam missing?
我不确定除了“语法”之外还有什么错误。有什么我妈妈想念的吗？
采纳答案by Philip Feldmann
As already mentioned, IE11 doesn't support ES6. Looking at the line of code that throws that error you'll quickly find ES6 features (arrow functions for example).
如前所述，IE11 不支持 ES6。查看引发该错误的代码行，您将很快找到 ES6 特性（例如箭头函数）。
Polyfilling will not provide you with the ability to use ES6, the only thing you can do is configure babelto target ES5 instead.
Polyfilling 不会为您提供使用 ES6 的能力，您唯一能做的就是将 babel 配置为针对 ES5。
You can do that by editing your babelrc(for Babel 7):
你可以通过编辑你的babelrc（对于 Babel 7）来做到这一点：
{
"presets": [
[
"@vue/app",
{
"targets": {
"ie": "11"
}
}
]
]
}
If you're still using Babel 6, according to the github docsyou should be able to use it like so:
如果您仍在使用 Babel 6，根据github 文档，您应该可以像这样使用它：
{
"presets": [
["env", {
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [ ">0.25%"]
}
}],
"vue"
]
}
回答by EscapeNetscape
try
尝试
npm update -D
at least, this helped in my case.
至少，这对我有帮助。
