如何在 Aurelia CLI 应用程序中 Babel Transpile Object.entries/values？答案

【问题标题】：How to Babel Transpile Object.entries/values in Aurelia CLI app?如何在 Aurelia CLI 应用程序中 Babel Transpile Object.entries/values？
【发布时间】：2017-08-06 22:49:50
【问题描述】：

使用 IE11 时，我的代码在任何使用 Object.entries 或 Object.values 的地方都会出现如下错误：

未处理的拒绝类型错误：对象不支持属性或方法“条目”...

我认为我的问题源于代码未转译为 ES5，但不确定在使用 Aurelia CLI 时如何检查或更改我的项目设置以进行转译/Babel。

进一步研究，我相信与 Aurelia 一起打包的 Babel/settings 不支持 Object.entries/values（或其他提议的 ES2017 选项），所以我在另一个线程中安装了 babel-preset-es2017 和 babel-plugin-transform-runtime - Babel support for Object.entries

但是，我无法弄清楚如何更新项目以包含这些以进行转译。在aurelia.json 或.babelrc 文件中添加transform-runtime 会破坏au run 并简单地将es2017 添加到.babelrc 文件似乎没有任何作用。我也在查看jsconfig.json 和transpile.js 文件，但找不到解决方案。

aurelia.json文件：

...
"transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
        "plugins": [
            "transform-es2015-modules-amd",
            "transform-runtime" <---tried
        ]
    },
    "source": "src/**/*.js"
},
...

.babelrc文件：

{
    "sourceMap": true,
    "moduleIds": false,
    "comments": false,
    "compact": false,
    "code": true,
    "presets": ["es2015-loose", "stage-1", "es2017"], <---tried
    "plugins": [
        "syntax-flow",
        "transform-decorators-legacy",
        "transform-flow-strip-types",
        "transform-runtime" <---tried
    ]
}

添加transform-runtime 会导致以下错误：

错误：ENOENT：没有这样的文件或目录，打开 'C:\Users...\src\babel-runtime\helpers\classCallCheck.js'

不知道为什么我会收到这个错误或者修复它是否会有所帮助，但我的猜测可能是因为 aurelia.json 中的 "source": src/**/*.js

任何帮助将不胜感激。谢谢！

【问题讨论】：

Object.values 将成为 ES2017 的一部分，而不是 ES7 (ES2016) 的一部分。
@FelixKling 我最初并不清楚您在指出这一点时在评论什么，但仔细阅读并看到了错误。感谢您了解这一点。

标签： babeljs aurelia transpiler ecmascript-2017

【解决方案1】：

我的解决方案是通过执行 npm install babel-plugin-transform-es2017-object-entries --save-dev 安装以下插件，它会转换 object.entries 和 object.values。

.babelrc 文件如下所示：

{
    "sourceMap": true,
    "moduleIds": false,
    "comments": false,
    "compact": false,
    "code": true,
    "presets": ["es2015-loose", "stage-1"],
    "plugins": [
        "syntax-flow",
        "transform-decorators-legacy",
        "transform-flow-strip-types",
        "transform-es2017-object-entries"
    ]
}

此外，根据 Babeljs.io (https://babeljs.io/docs/plugins/preset-es2017/)，babel-preset-es2017 似乎不包含对 object.entries/values 的插件/支持。此外，babel-tranform-runtime 的目的似乎与我需要的不同，不是我解决方案的一部分。

【讨论】：