javascript - 这个 SCRIPT1002 : Syntax error in IE11 mean? (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 丰塔威索姆 阿克西奥斯 洛扎德

这是我的文件结构的图片:

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
};

检查如何dual compile for legacy 还有一个很好的示例如何使用 IE11 处理 typescript-vue

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-typescript-legacy/index.js
{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: babelConfig.legacy
    },
    {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        compilerOptions: {
          target: 'es5'
        }
      }
    },
  ]
}

更新 根据vue-cli，解决方案是transpileDependency。你的模块是一个 es6 模块，必须转译为 es5，webpack 默认情况下会忽略 node_modules 进行转译。 https://cli.vuejs.org/config/#transpiledependencies

// vue.config.js
module.exports = {
  transpileDependencies: ['dom7', 'swiper', 'ssr-window']
}