Vue 3 CLI - 如何为 Object.entries 添加 babel polyfill答案

【问题标题】：Vue 3 CLI - How to add babel polyfill for Object.entriesVue 3 CLI - 如何为 Object.entries 添加 babel polyfill
【发布时间】：2018-09-24 08:35:56
【问题描述】：

我有一个依赖项 (vue2-google-maps)，这导致我的 Vue 应用在旧版浏览器中出现问题，并在 Object.entries 中引发错误。

阅读Vue CLI Docs on polyfills，我看到它提到尝试在babel.config.js 中加载polyfill。

我的babel.config.js：

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.object'
      ]
    }]
  ]
}

抛出错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /PROJECT_DIR/src/main.js: Cannot read property 'android' of undefined (While processing: "/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js")
    at targetEnvironments.filter.environment (/PROJECT_DIR/node_modules/@babel/preset-env/lib/index.js:75:16)
    at Array.filter (<anonymous>)
    at isPluginRequired (/PROJECT_DIR/node_modules/@babel/preset-env/lib/index.js:74:56)
    at includes.filter.item (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:23:12)
    at Array.filter (<anonymous>)
    at getPolyfills (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:22:19)
    at module.exports (/PROJECT_DIR/node_modules/@vue/babel-preset-app/index.js:94:17)
    at loadDescriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:163:14)
    at cachedFunction (/PROJECT_DIR/node_modules/@babel/core/lib/config/caching.js:42:19)
    at loadPresetDescriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:233:63)
    at config.presets.map.descriptor (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:68:19)
    at Array.map (<anonymous>)
    at recurseDescriptors (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:66:38)
    at loadFullConfig (/PROJECT_DIR/node_modules/@babel/core/lib/config/full.js:106:6)
    at process.nextTick (/PROJECT_DIR/node_modules/@babel/core/lib/transform.js:28:33)
    at process._tickCallback (internal/process/next_tick.js:112:11)

 @ multi (webpack)-dev-server/client?http://192.168.1.201:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我做错了什么？我用Vue CLI 3.0.3创建了这个项目

【问题讨论】：

您的browserlistrc 是否有可能不是针对那些较旧的浏览器（这会导致 polyfill 被剥离）？
虽然不是一个理想的解决方案，但我只是将 polyfill 的原始代码放入我的 vue 应用程序的 main.js 文件中，它可以工作，但感觉很hacky。

标签： javascript vue.js babeljs polyfills

【解决方案1】：

您需要将es6.object 更改为es7.object.entries 以使Object.entries 在旧版浏览器上工作。

所以您的/babel.config.js 应该如下所示：

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        polyfills: ["es7.object.entries"]
      }
    ]
  ]
};

我在这里找到了 polyfill 名称：built-in-features.js#L153

【讨论】：