如果我vue create my-new-app使用最新的 Vue Cli（当前版本 4.4.6）运行，是否会实现所有新的 ES2020 功能？（我已经测试过“可选链接”并且似乎能够使用它）
如果是这样，我如何从脚手架代码中分辨出来？我@vue/cli-plugin-babel/preset在 babel.config.js 中看到，是这样吗？
相信ES2020已经正式完成了。让我知道这是否不正确。
问问题
1354 次
1 回答
1
Babel 插件确实允许编译 ES2020 功能。debug您可以通过在运行构建之前启用来查看正在使用的插件：
// babel.config.js
module.exports = {
presets: [
// BEFORE:
// '@vue/cli-plugin-babel/preset'
['@vue/cli-plugin-babel/preset', { debug: true }]
]
}
调试输出将如下所示：
⠇ Building for production...@babel/preset-env: `DEBUG` option
Using targets:
{
"android": "81",
"chrome": "80",
"edge": "18",
"firefox": "76",
"ie": "11",
"ios": "12.2",
"opera": "67",
"safari": "13",
"samsung": "10.1"
}
Using modules transform: false
Using plugins:
proposal-nullish-coalescing-operator { "edge":"18", "ie":"11", "ios":"12.2", "safari":"13", "samsung":"10.1" }
proposal-optional-chaining { "edge":"18", "ie":"11", "ios":"12.2", "safari":"13", "samsung":"10.1" }
proposal-json-strings { "edge":"18", "ie":"11" }
proposal-optional-catch-binding { "edge":"18", "ie":"11" }
transform-parameters { "ie":"11" }
proposal-async-generator-functions { "edge":"18", "ie":"11" }
proposal-object-rest-spread { "edge":"18", "ie":"11" }
transform-dotall-regex { "edge":"18", "firefox":"76", "ie":"11" }
proposal-unicode-property-regex { "edge":"18", "firefox":"76", "ie":"11" }
transform-named-capturing-groups-regex { "edge":"18", "firefox":"76", "ie":"11" }
transform-async-to-generator { "ie":"11" }
transform-exponentiation-operator { "ie":"11" }
transform-template-literals { "ie":"11", "ios":"12.2" }
transform-literals { "ie":"11" }
transform-function-name { "edge":"18", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-unicode-escapes { "ie":"11" }
transform-unicode-regex { "ie":"11" }
transform-spread { "ie":"11" }
transform-destructuring { "ie":"11" }
transform-block-scoping { "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "ie":"11" }
syntax-dynamic-import { "android":"81", "chrome":"80", "edge":"18", "firefox":"76", "ie":"11", "ios":"12.2", "opera":"67", "safari":"13", "samsung":"10.1" }
syntax-top-level-await { "android":"81", "chrome":"80", "edge":"18", "firefox":"76", "ie":"11", "ios":"12.2", "opera":"67", "safari":"13", "samsung":"10.1" }
Using polyfills with `usage` option:
⠏ Building for production...
[/Users/tony/src/tmp/vue-tmp7/src/main.js] Based on your code and targets, core-js polyfills were not added.
⠴ Building for production...@babel/preset-env: `DEBUG` option
Using targets:
{
"android": "81",
"chrome": "80",
"edge": "18",
"firefox": "76",
"ie": "11",
"ios": "12.2",
"opera": "67",
"safari": "13",
"samsung": "10.1"
}
Using modules transform: false
Using plugins:
proposal-nullish-coalescing-operator { "edge":"18", "ie":"11", "ios":"12.2", "safari":"13", "samsung":"10.1" }
proposal-optional-chaining { "edge":"18", "ie":"11", "ios":"12.2", "safari":"13", "samsung":"10.1" }
proposal-json-strings { "edge":"18", "ie":"11" }
proposal-optional-catch-binding { "edge":"18", "ie":"11" }
transform-parameters { "ie":"11" }
proposal-async-generator-functions { "edge":"18", "ie":"11" }
proposal-object-rest-spread { "edge":"18", "ie":"11" }
transform-dotall-regex { "edge":"18", "firefox":"76", "ie":"11" }
proposal-unicode-property-regex { "edge":"18", "firefox":"76", "ie":"11" }
transform-named-capturing-groups-regex { "edge":"18", "firefox":"76", "ie":"11" }
transform-async-to-generator { "ie":"11" }
transform-exponentiation-operator { "ie":"11" }
transform-template-literals { "ie":"11", "ios":"12.2" }
transform-literals { "ie":"11" }
transform-function-name { "edge":"18", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-unicode-escapes { "ie":"11" }
transform-unicode-regex { "ie":"11" }
transform-spread { "ie":"11" }
transform-destructuring { "ie":"11" }
transform-block-scoping { "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "ie":"11" }
syntax-dynamic-import { "android":"81", "chrome":"80", "edge":"18", "firefox":"76", "ie":"11", "ios":"12.2", "opera":"67", "safari":"13", "samsung":"10.1" }
syntax-top-level-await { "android":"81", "chrome":"80", "edge":"18", "firefox":"76", "ie":"11", "ios":"12.2", "opera":"67", "safari":"13", "samsung":"10.1" }
Using polyfills with `usage` option:
[/Users/tony/src/tmp/vue-tmp7/src/App.vue] Based on your code and targets, core-js polyfills were not added.
⠧ Building for production...
[/Users/tony/src/tmp/vue-tmp7/src/components/HelloWorld.vue] Based on your code and targets, core-js polyfills were not added.
在 macOS Catalina 上使用 Node 14、Vue CLI 4.4.6 和@babel/preset-env7.10.3 进行测试
自 Vue CLI 4.4.6 起支持的 ES2020 功能
- 可选链
- 无效合并
Promise.prototype.allSettledString.prototype.matchAll- 私有类字段
- 动态导入增强
BigInt- 使用构造函数时可能需要 ESLint 配置以避免 lint 错误
于 2020-06-28T08:15:50.547 回答