此SCRIPT1002：IE11中的语法错误是什么意思？ （Vue）

Question

我已经在Vue.JS中制作了一个Web应用程序，它将无法在IE11中编译，它只显示一个空白页面。

我已经使用了Babel的polyfill，但是仍然无法使用。

错误是：

SCRIPT1002: Syntax error 
chunk-vendors.js (5489,1)
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dom7/dist/dom7.modular */ \"./node_modules/dom7/dist/dom7.modular.js\");\n/* harmony import */ var ssr_window__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ssr-window */ \"./node_modules/ssr-window/dist/ssr-window.esm.js\");\n/**\n * Swiper 5.4.1\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * http://swiperjs.com\n *\n * Copyright 2014-2020 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: May 20, 2020\n */\n\n\n\n\nconst Methods = {\n  addClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"addClass\"],\n  removeClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"removeClass\"],\n  hasClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"hasClass\"],\n  toggleClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"toggleClass\"],\n  attr: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"attr\"],\n

我的babel.config.js：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 1 version", "ie >= 11"]
        }
      }
    ]
  ]
};

我的main.ts：

import "babel-polyfill";
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import * as VueGoogleMaps from "vue2-google-maps";
import VueMq from "vue-mq";

Vue.use(VueMq, {
  breakpoints: {
    xs: 479,
    tablet: 991,
    laptop: 1024
  }
});

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyBZEpbDBTlLej-ODlXEfQ8ghkt0emSbAGM",
    libraries: "places" // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)

    //// If you want to set the version, you can do so:
    // v: '3.26',
  }

  //// If you intend to programmatically custom event listener code
  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
  //// you might need to turn this on.
  // autobindAllEvents: false,

  //// If you want to manually install components, e.g.
  //// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
  //// Vue.component('GmapMarker', GmapMarker)
  //// then disable the following:
  // installComponents: true,
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

我正在使用许多库，包括：

SwiperJS丰美的Axioslozad

Answer 1

首先不要从转译中排除这些库（babel-loader），因为您需要es5

exclude: [/node_modules\/(?!(swiper|dom7)\/).*/]

然后尝试使用插件进行此配置，也许您还需要"transform-exponentiation-operator"

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript/babel-config.js

const legacy = {
  presets: [
    ["@babel/preset-env", {
      targets: {
        browsers: [
          "ie >= 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false
};

检查如何对旧版https://darvin.dev进行双重编译