使用带有扩展运算符的 3rd 方库时 IE11/Edge 中的 NUXTJS 问题

Question

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

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

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

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

下面列出的是我达到这一点所采取的步骤：

在 nuxt.config.js 中没有 transpile 选项的原始状态

IE11 & EDGE

• 控制台错误：

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

使用 nuxt.config.js 中的 transpile 选项更改状态

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 - ...data（传播运算符导致问题））

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 中为第一个第三方库添加 transpile 选项后，由于应用程序和库之间不同版本的 javascript 之间的不兼容，它似乎破坏了所有功能。

Answer 1

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

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

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

2. 增加脚本参照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 }