web-dev-qa-db-fra.com

Compiler ES6 et VUE JS ne fonctionne pas IE 11

J'ai donc un problème avec ES6, Webpack et VUE JS dans IE 11. Cela fonctionne dans Edge, Chrome, Safari et Firefox, mais pas dans IE 11.

L'erreur:

SCRIPT1002: Syntax error
vue.js (16,8498)

Ok, alors qu'est-ce que c'est à cette ligne?

(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 :

Cela dure un moment ...

Je suis confus par ce désordre, tout comme vous, j'en suis sûr:

Ceci est mon fichier 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']);

J'ai également installé et fait: babel polyfill et fait: import "@babel/polyfill"; Dans le boot.js Que nous avons.

Je ne suis pas sûr de ce que l'erreur est en dehors de "syntaxe". Y at-il quelque chose qui me manque?

javascriptvue.jswebpackinternet-explorer-11laravel-mix
10
TheWebs

Comme déjà mentionné, IE11 ne supporte pas ES6. En regardant la ligne de code qui génère cette erreur, vous trouverez rapidement les fonctionnalités de ES6 (fonctions de flèche par exemple).

Polyfilling ne vous donnera pas la possibilité d'utiliser ES6, la seule chose à faire est de configurer babel pour cibler ES5 à la place.

Vous pouvez le faire en éditant votre babelrc (pour Babel 7):

{
  "presets": [
    [
      "@vue/app",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

Si vous utilisez toujours Babel 6, selon le github docs , vous devriez pouvoir l'utiliser comme suit:

{
  "presets": [
    ["env", {
      "targets": {
        // The % refers to the global coverage of users from browserslist
        "browsers": [ ">0.25%"]
      }
    }],
    "vue"
  ]
}
12
Philip Feldmann