After seeking help on Stack Overflow and conducting extensive research, I have finally configured my babel.rc file as follows:
{
"presets": [["env", {
"modules": false,
"uglify": true,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"vue",
"vue-app",
"stage-2"
],
"plugins": ["transform-runtime", "transform-vue-jsx"]
}
Additionally, this is the setup for my webpack configuration:
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/',
'polly-fill': npm + '@babel/polyfill/dist/',
};
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/' + jQueryUIT...
Despite understanding that Internet Explorer 11 lacks support for anything beyond ES5, my Vue JS code still fails to compile down to ES5. Even after following suggestions from previous inquiries, the issue persists with an error message at line 16,8498 in vue.js.
This snippet of code at the problematic line reads:
(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 || va...
I am uncertain about the specific version of webpack being used since I am working within Laravel Mix, while using babel 6.
Although everything seems to compile correctly, the challenge remains that my Vue JS code does not compile effectively down to ES5 for compatibility with IE 11.