Saya mengalami kesulitan luar biasa untuk membuat polyfill saya bekerja di Edge. Saya sudah mencoba mengikuti dokumentasi dengan berbagai upaya yang semuanya tidak berfungsi. Tampaknya itu janji. Akhirnya secara khusus itu tidak berhasil. Ini terjadi dalam modul vuex jadi saya mencoba menambahkan vuex ke transpileDependencies di vue.config tetapi tidak berhasil.
Babel.config.js saya:
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {
useBuiltIns: 'entry',
}]],
};
Di main.js saya, saya memiliki dua impor berikut di bagian paling atas:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
Vue.config.js saya
// 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'],
};
Catatan seperti yang disebutkan di atas saya telah mencoba keduanya dengan dan tanpa transpileDepedencies. Dikatakan di sini vue / babel-preset-app yang es7.promise.finally
disertakan sebagai polyfill default
Versi:
- Microsoft Edge: 44.18
- Microsoft EdgeHTML 18.18362
- @ vue / cli-plugin-babel ":" ^ 4.1.2 "
- "core-js": "^ 3.6.4"
- "regenerator-runtime": "^ 0.13.3"
Perbarui 13/02
Jadi saya mencoba mengetik Promise.prototype di situs saya di tepi dan tampaknya itu adalah polyfilled:
Jadi saat ini saya sedang menyelidiki jika beberapa bagian dari rantai saya (axios / vue axios) tidak memberikan janji. Karena ini bekerja di chrome, saya curiga ada bagian rantai yang tidak terisi dengan benar?
Ini seluruh rantai saya:
/* 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}`);
},
...
}
finally()
pada Promise sejak v18*Version number used for Edge is based on the number of EdgeHTML rather than Edge itself. This is because EdgeHTML is the engine for Edge that is related to feature support change.
Jawaban:
Saya pernah menghadapi masalah itu sebelumnya. Hanya akhirnya tidak berhasil di Edge. Saya akhirnya memperbarui seperti di bawah VVV dan ini berhasil.
Ini harus menangani perbanyakan spesies yang tumbuh di samping perilaku yang dirinci di bawah ini:
Implementasi ini didasarkan pada perilaku yang terdokumentasi dari akhirnya () dan tergantung pada saat itu () yang sesuai dengan spesifikasi:
sumber
Ini adalah masalah yang diketahui di core-js .
Secara teori, Edge menyediakan polyfill Promise untuk akhirnya, tetapi mungkin ada sesuatu yang terjadi dengan deteksi fitur atau daftar browser Anda dan Anda perlu memberikan polyfill: shrug:
Saya akan menghapus kedua plugin Vue babel dan core-js dari proyek Anda dan kemudian menginstalnya npm segar.
npm install @vue/cli-plugin-babel --save-dev
npm install core-js --save
Juga, pastikan Anda menggunakan core-js @ 3 melalui config Anda (babel.config.js) di sini
Terakhir, ada beberapa masalah Github berbicara tentang polyfill + Janji sehubungan dengan perpustakaan pihak ke-3 lainnya yang dijalankan di toko vuex Anda. Tambahkan ketiga pustaka tersebut (axios, vue-axios, vuex) ke
transpileDependencies
bagian Anda . Jika itu memperbaikinya, mulailah menghapus dependensi untuk melihat apakah mereka diperlukan.sumber
Coba tambahkan
.browserslistrc
file ke root proyek Anda dengan konten berikut:Lihat https://github.com/browserslist/browserslist#best-practices informasi tentang
last versions
konfigurasi.Jika ini tidak menyelesaikan poly-fill yang hilang, coba nonaktifkan plugin yang Anda gunakan yang membatasi jumlah bongkahan untuk memastikan bahwa hal ini tidak menyebabkan semua pengisian-poli dihilangkan.
sumber