web-dev-qa-db-ja.com

Vueプロジェクトのpromise.finallyがEdgeで機能しないのはなぜですか？

Edgeでポリフィルを機能させるのに非常に苦労しています。私はさまざまな試みですべてがうまくいかないようにしてドキュメントを追跡しようとしました。それはpromise.finally具体的には機能していないようです。これはvuexモジュールで発生するため、vue.configのtranspileDependenciesにvuexを追加しようとしましたが、うまくいきませんでした。

enter image description here

私のbabel.config.js：

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

私のmain.jsでは、最上部に次の2つのインポートがあります。

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

上記のように、私はtranspileDepedenciesを使用した場合と使用しない場合の両方を試しました。ここで言う vue/babel-preset-app that 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を入力しようとしました、そしてそれはそれがポリフィルされているように見えます： here

したがって、現在、チェーンの一部（axios/vue axios）が約束を返さないかどうかを調査しています。 chromeで動作しているので、チェーンの一部が正しくポリフィルされていないのではないかと思いますか？

これは私の全体のチェーンです：

/* 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}`);
  },
  ...
}
javascriptvue.jsvuejs2babelpolyfills
15
J.Kirk.

これは core-js の既知の問題です。

理論的には、Edgeは最終的にPromiseポリフィルを提供しますが、機能検出またはブラウザーリストで何かが起こっているため、ポリフィル：shrugを提供する必要があります。

Vue babelプラグインとcore-jsの両方をプロジェクトから削除してから、npmでそれらを新規インストールします。

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

  • npm install core-js --save

また、設定（babel.config.js）でcore-js @ 3を使用していることを確認してください here

最後に、vuexストアで実行される他のサードパーティライブラリに関して、ポリフィル+プロミスについて話しているGithubの問題がいくつかあります。これら3つのライブラリ（axios、vue-axios、vuex）をすべてtranspileDependenciesセクションに追加します。それで問題が解決した場合は、依存関係の削除を開始して、それらが必要かどうかを確認します。

0
Jess

次の内容の.browserslistrcファイルをプロジェクトルートに追加してみてください。

> 1%
last 2 versions

last versionsの構成に関する https://github.com/browserslist/browserslist#best-practices 情報を参照してください。

これで欠落しているポリフィルが解決されない場合は、チャンク数を制限している使用中のプラグインを無効にして、ポリフィルが省略されないようにしてください。

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