草庐IT

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

coder 2025-01-19 原文

我有一个依赖项 (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

创建了项目

最佳答案

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

所以你的 /babel.config.js 应该如下所示:

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

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

关于javascript - Vue 3 CLI - 如何为 Object.entries 添加 babel polyfill,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52475423/

有关javascript - Vue 3 CLI - 如何为 Object.entries 添加 babel polyfill的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 如何为 emacs 安装 ruby​​-mode - 2

    我刚刚为fedora安装了emacs。我想用emacs编写ruby。为ruby​​提供代码提示、代码完成类型功能所需的工具、扩展是什么? 最佳答案 ruby-mode已经包含在Emacs23之后的版本中。不过,它也可以通过ELPA获得。您可能感兴趣的其他一些事情是集成RVM、feature-mode(Cucumber)、rspec-mode、ruby-electric、inf-ruby、rinari(用于Rails)等。这是我当前用于Ruby开发的Emacs配置:https://github.com/citizen428/emacs

  3. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  4. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  5. ruby-on-rails - 如何为空白字段编写 rspec? [Rails3.1] - 2

    我使用rails3.1+rspec和factorygirl。我对必填字段(validates_presence_of)的验证工作正常。我如何让测试将该事实用作“成功”而不是“失败”规范是:describe"Addanindustrywithnoname"docontext"Unabletocreatearecordwhenthenameisblank"dosubjectdoind=Factory.create(:industry_name_blank)endit{shouldbe_invalid}endend但是我失败了:Failures:1)Addanindustrywithnona

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 你会如何在 Ruby 中表达成语 "with this object, if it exists, do this"? - 2

    在Ruby(尤其是Rails)中,您经常需要检查某物是否存在,然后对其执行操作,例如:if@objects.any?puts"Wehavetheseobjects:"@objects.each{|o|puts"hello:#{o}"end这是最短的,一切都很好,但是如果你有@objects.some_association.something.hit_database.process而不是@objects呢?我将不得不在if表达式中重复两次,如果我不知道实现细节并且方法调用很昂贵怎么办?显而易见的选择是创建一个变量,然后测试它,然后处理它,但是你必须想出一个变量名(呃),它也会在内存中

  8. ruby - 在 Ruby 中,为什么 Array.new(size, object) 创建一个由对同一对象的多个引用组成的数组? - 2

    如thisanswer中所述,Array.new(size,object)创建一个数组,其中size引用相同的object。hash=Hash.newa=Array.new(2,hash)a[0]['cat']='feline'a#=>[{"cat"=>"feline"},{"cat"=>"feline"}]a[1]['cat']='Felix'a#=>[{"cat"=>"Felix"},{"cat"=>"Felix"}]为什么Ruby会这样做,而不是对object进行dup或clone? 最佳答案 因为那是thedocumenta

  9. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本,它在Chrome中获取选定的文本并在Google中查找它,提供四个最佳选择,然后粘贴相关链接。它以不同的格式粘贴,具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式,普通网站的HTML,我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子,但它仍然输出纯文本。在文本编辑中保存文件并进行试验后,我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

  10. ruby-on-rails - 在没有 :total_entries to improve a lengthy query 的情况下使用 will_paginate - 2

    我有一个will_paginate的当前实现,它使用paginate_by_sql方法来构建要分页的集合。我们有一个针对total_entries的自定义查询,它非常复杂并且给我们的数据库带来了很大的负载。因此,我们想从分页中完全删除total_entries。换句话说,我们只需要一个“下一个-上一个”按钮,而不是“上一个1[2]345下一个”的典型分页显示。但我们需要了解一些事情。我们是否显示上一个链接?这当然只会发生在当前选择中显示的记录之前存在的记录我们是否显示下一个链接?如果显示集合中的最后一条记录,则不会显示此内容来自docsAqueryforcountingrowswill

随机推荐