Javascript 编译ES6和VUE JS不适用于IE 11
因此,我对IE11中的ES6、Webpack和VUE JS存在问题。这适用于Edge、Chrome、Safari和Firefox,但不适用于IE11 错误:Javascript 编译ES6和VUE JS不适用于IE 11,javascript,vue.js,webpack,internet-explorer-11,laravel-mix,Javascript,Vue.js,Webpack,Internet Explorer 11,Laravel Mix,因此,我对IE11中的ES6、Webpack和VUE JS存在问题。这适用于Edge、Chrome、Safari和Firefox,但不适用于IE11 错误: SCRIPT1002: Syntax error vue.js (16,8498) 好的,那么这条线是什么 (module,__webpack_exports__,__webpack_require__){"use strict";eval("/* unused harmony export getJSON */\n/* unused h
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 :
这会持续一段时间
我被这一团糟弄糊涂了,我相信你也是:
这是我的网页包文件:
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']);
我还安装并完成了:import“@babel/polyfill”代码>在boot.js
中,我们有
我不确定除了“语法”之外还有什么错误我缺少什么吗?如前所述,IE11不支持ES6。查看抛出该错误的代码行,您将很快找到ES6功能(例如箭头函数)
Polyfilling不会为您提供使用ES6的能力,您唯一能做的就是将ES5作为目标
您可以通过编辑您的babelrc
(适用于Babel 7)来实现这一点:
如果您仍在使用Babel 6,根据以下说明,您应该能够像这样使用它:
{
"presets": [
["env", {
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [ ">0.25%"]
}
}],
"vue"
]
}
这似乎是一个更好的答案,什么是@vue/app
?我正在使用的是{“预设”:[“env”,“vue”]}
是否有用于@vue
的巴贝尔预设空间?@vue
空间是当前版本的vue cli和与之相关的所有内容(v3)-这仅与巴贝尔7兼容。如果您仍在使用6,我想通过将这些选项嵌套在“env”数组中也可以实现同样的效果。我会更新我的答案,但我不能100%确定它是否适用于babel 6。我应该把这个放在哪个文件中?@JSmith这需要放在你的babel配置文件中。大多数情况下,当我尝试将此预设与@babel/preset env
一起运行时,它被命名为.babelrc
,就像这样['@babel/preset env',{modules:false}],我得到一个错误-require没有定义
{
"presets": [
["env", {
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [ ">0.25%"]
}
}],
"vue"
]
}