编译ES6和VUE JS在IE 11中不起作用 [英] Compiling ES6 and VUE JS not working in IE 11
问题描述
所以我在IE 11中遇到了ES6，Webpack和VUE JS的问题.这在Edge，Chrome，Safari和Firefox中有效，但在IE 11中不起作用.
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.
错误:
SCRIPT1002: Syntax error
vue.js (16,8498)
好吧，这行呢?
(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:
这是我的Webpack文件:
This is my Webpack file:
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']);
我还已经安装并完成: babel polyfill 并完成了:import "@babel/polyfill";在boot.js中.
I have also installed and done: babel polyfill and done: import "@babel/polyfill"; in the boot.js we have.
除了语法"之外，我不确定该错误是什么. 我可能缺少某些东西吗?
I am unsure what the error is aside from "syntax". Is there something I mam missing?
推荐答案
如上所述，IE11不支持ES6.查看引发该错误的代码行，您将快速找到ES6功能(例如箭头功能).
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).
Polyfilling will not provide you with the ability to use ES6, the only thing you can do is configure babel to target ES5 instead.
您可以通过编辑babelrc(对于Babel 7)来做到这一点:
You can do that by editing your babelrc (for Babel 7):
{
"presets": [
[
"@vue/app",
{
"targets": {
"ie": "11"
}
}
]
]
}
如果您仍在使用Babel 6，请根据 github文档能够像这样使用它:
If you're still using Babel 6, according to the github docs you should be able to use it like so:
{
"presets": [
["env", {
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [ ">0.25%"]
}
}],
"vue"
]
}
这篇关于编译ES6和VUE JS在IE 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
