Nuxt & Firebase - IE 11(Object 不支持属性或方法"值")

Question

我在尝试为 IE11 填充 Firebase 时无法获得 Nuxt 和 babel。我不确定我错过了什么。

useBuiltIns: "usage"IE11 返回错误Object doesn't support property or method 'values'

当useBuiltIns: "entry"IE11 返回错误Object doesn't support property or method 'assign'

nuxt.config.js

babel: {
presets({ envName }) {
const envTargets = {
client: {
browsers: ["last 2 versions"],
ie: 11
},
server: {
node: "current"
},
}
return [
[
"@nuxt/babel-preset-app",
{
useBuiltIns: "usage",
polyfills: ['es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.object.values', 'es7.promise.finally'],
targets: envTargets[envName]
}
]
]
},

包.json

"dependencies": {
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/polyfill": "^7.10.1",
"@babel/runtime-corejs2": "^7.10.2",
"@vue/babel-preset-app": "^4.4.1",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0",
"core-js": "2.6.11",
"firebase": "^7.15.0",
"node-sass": "^4.14.1",
"nuxt": "^2.12.2",
"sass-loader": "^8.0.2",
"vue-select": "^3.10.3"
},

Answer 1

Firebase 在 SDK 中包含自己的 polyfill 包。

您需要通过以下方式导入该包：

1. 创建包含以下内容的/plugins/polyfills.js：

import '@firebase/polyfill';

相反，您可以在该文件中导入您认为单独需要的 polyfill，因此最终的捆绑包会更小。例：

import '@firebase/polyfill/node_modules/core-js/features/object/values';

2. 添加到您的nuxt.config.js：

plugins: [
{ src: '~plugins/polyfills', mode: 'client' },
],