编译 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 */
/* unused harmony export getScrollBarWidth */
/* unused harmony export translations */
/* harmony export (immutable) */ __webpack_exports__["b"] = delayer;
/* unused harmony export VueFixer */
// coerce convert som types of data into another type
const coerce = {
  // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.
  boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),
  // Attempt to convert a string value to a Number. Otherwise, return 0.
  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 不会为您提供使用 ES6 的能力，您唯一能做的就是 配置 babel 以改为面向 ES5.

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屋！