javascript - 使用带传播运算符的第三方库时 IE11/Edge 中的 NUXTJS 问题

Question

我有一个 NUXTJS (v2.9.2) Web 应用程序在 IE11 和 Edge 中运行时出现渲染问题。该应用程序适用于 Chrome、Safari 和 FireFox。我已经在引用的第 3 方 npm 包 (vue-mapbox) 中追踪到传播运算符。

我已经阅读了一些引用相同问题的帖子，在大多数情况下，修复似乎是在 nuxt.config.js 文件的 build > transpile 选项中包含引用的第 3 方库。

  build: {
    transpile: [
      ({ isLegacy }) => isLegacy && "vue-mapbox"
    ]
  }

添加到 nuxt.config.js 文件允许 Web 应用程序在 IE11 和 Edge 中加载，但现在我在所有浏览器中都遇到 Javascript 错误并且功能丢失。

下面列出了我为达到这一点所采取的步骤:

原始状态 nuxt.config.js 中没有转译选项

IE11 和边缘

• 控制台错误:

SCRIPT1003: Expected ':'

• JS 文件 (withEvents.js)

export default {
  methods: {
    /**
     * Emit Vue event with additional data
     *
     * @param {string} name EventName
     * @param {Object} [data={}] Additional data
     */
    $_emitEvent(name, data = {}) {
      this.$emit(name, {
        map: this.map,
        component: this,
        ...data
      });
    },

CHANGED STATE 使用 nuxt.config.js 中的转译选项

NUXTJS

• 编译警告

WARN  in ./node_modules/vue-mapbox/src/components/map/mixins/withAsyncActions.js                                                                        

"export 'default' (imported as 'promisify') was not found in 'map-promisified' 

所有浏览器

• 控制台错误(es6.promise.js - ...数据(传播运算符导致问题))

Uncaught (in promise) TypeError: Object(...) is not a function
    at VueComponent.$_registerAsyncActions (vendors.app.js:79061)
    at vendors.app.js:25088

error TypeError: Cannot read property 'querySourceFeatures' of null
    at VueComponent.createMapMarkers (:8080/_nuxt/pages/index.js:1418)
    at VueComponent.onIdle (:8080/_nuxt/pages/index.js:1365)
    at invokeWithErrorHandling (commons.app.js:14784)
    at VueComponent.invoker (commons.app.js:15109)
    at invokeWithErrorHandling (commons.app.js:14784)
    at VueComponent.Vue.$emit (commons.app.js:16807)
    at VueComponent.$_emitEvent (vendors.app.js:79571)
    at VueComponent.$_emitMapEvent (vendors.app.js:79584)
    at r.St.fire (vendors.app.js:53018)
    at r._render (vendors.app.js:53022)

在 nuxt.config.js 中为第 3 方库添加转译选项后，由于应用程序和库之间不同版本的 javascript 之间的不兼容性，它似乎破坏了所有功能。

Answer 1

我们能够通过在我们的解决方案中进行以下添加/更改来解决此问题。

1. 将我们的 vue-mapbox 导入更改为直接引用 vue-mapbox 包的 dist 文件夹中的 umd js 文件

import { MglMap, MglGeolocateControl, MglNavigationControl } from "vue-mapbox/dist/vue-mapbox.umd.js";

1. 添加了对 polyfill.io 的脚本引用(指定所需的功能)到 Nuxt.config.js

const ployfillFeatures = [
  "fetch",
  "Object.entries",
  "Element.prototype.classList",
  "IntersectionObserver"
].join("%2C");

module.exports = {
  mode: "universal",    
    script: [
      { src: `https://polyfill.io/v3/polyfill.min.js?features=${ployfillFeatures}`, body: true }