Чому в моєму проекті Vue не працює в Edge?

У мене виникають величезні труднощі з тим, щоб мої поліфіли працювали в Edge. Я намагався слідкувати за документацією з різними спробами, все не працювало. Здається, це обіцяє. Остаточно конкретно, що це не працює. Це відбувається в модулі vuex, тому я спробував додати vuex до transpileDependences в vue.config, але не пощастило.

Мій babel.config.js:

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {
    useBuiltIns: 'entry',
  }]],
};

У моєму main.js у наступних двох імпортах в самому верху:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

Мій vue.config.js

// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  configureWebpack: {
    // Set up all the aliases we use in our app.
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6,
      }),
    ],
  },
  css: {
    // Enable CSS source maps.
    sourceMap: !isProd,
  },
  transpileDependencies: ['vuex'],
};

Зауважте, як було сказано вище, я спробував як з, так і без transpileDepeditions. Тут написано vue / babel-preset-додаток, яке es7.promise.finallyвключено як поліфайл за замовчуванням

Версії:

• Microsoft Edge: 44.18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "core-js": "^ 3.6.4"
• "регенератор-час виконання": "^ 0.13.3"

Оновлення 13/02

Тому я спробував ввести Promise.prototype на своєму сайті в край, і, здається, він є заповненим:

Тож зараз я розслідую, чи якась частина мого ланцюга (axios / vue axios) не повертає обіцянки. Оскільки він працює в хромі, я підозрюю, що частина ланцюга неправильно заповнюється?

Це весь мій ланцюжок:

/* VUEX MODULE ACTION */  
[a.ALL_CUSTOMERS](context) {
    context.commit(m.SET_CUSTOMER_LOADING, true);
    CustomerService.getAll()
      .then(({ data }) => {
        context.commit(m.SET_CUSTOMERS, data);
      })
      .finally(() => context.commit(m.SET_CUSTOMER_LOADING, false));
  },

/* CUSTOMER SERVICE */
import ApiService from '@/common/api.service';
const CustomerService = {
  getAll() {
    const resource = 'customers/';
    return ApiService.get(resource);
  },
...
}

/* API SERVICE */
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

const ApiService = {
  init() {
    Vue.use(VueAxios, axios);
    let baseUrl = process.env.VUE_APP_APIURL;
    Vue.axios.defaults.baseURL = baseUrl;
  },

  setHeader() {
    Vue.axios.defaults.headers.common.Authorization = `Bearer ${getToken()}`;
  },

  get(resource) {
    this.setHeader();
    return Vue.axios.get(`${resource}`);
  },
  ...
}

Я раніше не стикався з цим питанням. Тільки нарешті не вийшло на Edge. Я оновив нарешті, як нижче VVV, і це спрацювало.

Це повинно впоратись із розповсюдженням видових видів, а також з описаними нижче способами поведінки:

Promise.prototype.finally = Promise.prototype.finally || {
  finally (fn) {
    const onFinally = value => Promise.resolve(fn()).then(() => value);
    return this.then(
      result => onFinally(result),
      reason => onFinally(Promise.reject(reason))
    );
  }
}.finally;

Ця реалізація заснована на документально підтвердженій поведінці нарешті () і залежить від того, чи буде тоді () відповідати специфікації:

Нарешті зворотний виклик не отримає жодних аргументів, оскільки немає надійних засобів визначення того, чи обіцянка була виконана чи відхилена. Цей випадок використання є саме тоді, коли ви не піклуєтесь про причину відхилення чи значення виконання, і тому немає необхідності в цьому.

На відміну від Promise.resolve(2).then(() => {}, () => {})(яке буде вирішено з невизначеним), Promise.resolve(2).finally(() => {})буде розв'язано з 2.

Аналогічно, на відміну від Promise.reject(3).then(() => {}, () => {})(який буде виконано з невизначеним), Promise.reject(3).finally(() => {}) буде відхилено з 3.

Примітка : кидок (або повернення відхиленої обіцянки) у остаточному зворотному звороті буде відхиляти нову обіцянку з причиною відхилення, вказаною при виклику кидання ().

Це відома проблема в core-js .

Теоретично Edge забезпечує поліфіл Promise для нарешті, але, можливо, щось відбувається з виявленням функцій або списком браузера, і вам потрібно надати polyfill: shrug:

Я б видалив як плагін Vue babel, так і core-js з вашого проекту, а потім встановив їх у свіжому режимі.

• npm install @vue/cli-plugin-babel --save-dev

• npm install core-js --save

Також переконайтесь, що ви використовуєте core-js @ 3 через конфігурацію (babel.config.js) тут

Нарешті, є декілька питань Github, які говорять про поліфілінг + Обіцяння стосовно інших сторонніх бібліотек, виконаних у вашому магазині vuex. Додайте всі три бібліотеки (axios, vue-axios, vuex) у свій transpileDependenciesрозділ. Якщо це вирішить, почніть видаляти залежності, щоб побачити, чи потрібні вони.

Спробуйте додати .browserslistrcфайл до кореня проектів із наступним вмістом:

> 1%
last 2 versions

Див. Https://github.com/browserslist/browserslist#best-practices інформацію про last versionsконфігурацію.

Якщо це не вирішує відсутню полі-заповнення, спробуйте вимкнути плагін, який ви використовуєте, що обмежує кількість шматочків, щоб переконатися, що це не спричиняє опущення жодної полізаливки.

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],