Neden söz veriyorum. Son olarak Vue projemde Edge çalışmıyor?

Çoklu dolgularımın Edge'de çalışmasını sağlamakta büyük sıkıntı yaşıyorum. Tüm çalışmayan çeşitli girişimlerle belgeleri takip etmeye çalıştım. Bu söz veriyor gibi. Son olarak özellikle çalışmıyor. Bu bir vuex modülünde bu yüzden vue.config içinde ama şanssız transpileDependencies vuex eklemeyi denedim.

Babel.config.js dosyam:

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

Main.js dosyamda en üstte şu iki içe aktarma var:

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

Vue.config.js dosyam

// 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'],
};

Yukarıda belirtildiği gibi ben hem transpileDepedencies ile hem de denedim denedim. Burada yazıyor vue / Babil'i önceden ayarlanmış-appes7.promise.finally varsayılan Polyfill olarak dahil edilir

sürümleri:

• Microsoft Edge: 44,18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "core-js": "^ 3.6.4"
• "rejeneratör-çalışma zamanı": "^ 0.13.3"

Güncelleme 13/02

Bu yüzden kenar sitemde Promise.prototype yazmaya çalıştım ve polifilled görünüyor:

Şu anda zincirimin bir kısmının (axios / vue axios) bir söz vermediğini araştırıyorum. Kromda çalıştığından, zincirin bir kısmının doğru şekilde doldurulmadığından şüpheleniyorum?

Bu benim tüm zincirim:

/* 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}`);
  },
  ...
}

Bu konuyla daha önce hiç karşılaşmadım. Nihayet Edge'de çalışmadı. Sonunda aşağıdaki VVV gibi güncelledim ve çalıştı.

Bu, aşağıda detaylandırılan davranışlara ek olarak yenilebilir türlerin çoğalmasını da ele almalıdır :

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;

Bu uygulama, nihayet () dokümante edilmiş davranışına dayanmaktadır ve o zaman () spesifikasyona uygunluğuna bağlıdır :

Sonunda geri arama herhangi bir argüman almayacaktır, çünkü sözün yerine getirilip getirilmediğini belirlemenin güvenilir bir yolu yoktur. Bu kullanım durumu, reddedilme nedenini veya yerine getirme değerini umursamadığınızda içindir ve bu nedenle bunu sağlamaya gerek yoktur.

Aksine Promise.resolve(2).then(() => {}, () => {})(tanımsız ile çözülecek), Promise.resolve(2).finally(() => {})2 ile çözülecektir.

Benzer şekilde, Promise.reject(3).then(() => {}, () => {})(tanımsız ile yerine getirilecek) aksine Promise.reject(3).finally(() => {}) , 3 ile reddedilecektir.

Not : Sonunda geri aramadaki bir atış (veya reddedilen bir sözü geri gönderme) yeni sözü, throw () çağrılırken belirtilen reddetme nedeniyle reddeder.

Bu core-j'lerde bilinen bir sorundur .

Teorik olarak, Edge nihayet bir Promise polyfill sağlar, ancak özellik algılama veya tarayıcı listenizde bir şeyler oluyor olabilir ve bir polyfill: shrug:

Hem Vue babel eklentisini hem de core-j'leri projenizden silerim ve ardından npm'i yeni yüklerim.

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

• npm install core-js --save

Ayrıca, yapılandırmanız aracılığıyla core-js @ 3 kullandığınızdan emin olun (babel.config.js) burada

Son olarak, vuex mağazanızda yürütülen diğer 3. taraf kitaplıklarıyla ilgili çoklu dolgular + Vaatler hakkında birkaç Github sorunu var. Bu kütüphanelerin üçünü de (axios, vue-axios, vuex) transpileDependenciesbölümünüze ekleyin . Bu sorunu giderirse, gerekli olup olmadıklarını görmek için bağımlılıkları kaldırmaya başlayın.

.browserslistrcAşağıdaki içeriğe sahip proje köklerinize bir dosya eklemeyi deneyin :

> 1%
last 2 versions

Yapılandırma hakkındaki https://github.com/browserslist/browserslist#best-practices bilgilerine bakın last versions.

Bu, eksik poli dolguyu çözmezse, herhangi bir poli dolgunun atlanmasına neden olmadığından emin olmak için kullandığınız eklentiyi parça sayısını sınırlandırmayı deneyin.

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