Vue Cli 4.4.6 是否将 ES2020 脚手架放入项目中

Question

如果我使用最新的 Vue Cli(当前版本 4.4.6(运行vue create my-new-app，会实现所有新的 ES2020 功能吗？ (我已经测试了"可选链接"，似乎可以使用它(

如果是这样，我如何从基架代码中分辨出来？我在babel.config.js中看到@vue/cli-plugin-babel/preset，这样做吗？

相信ES2020已经正式完成。 如果这是不正确的，请告诉我。

Answer 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 进行测试

---

ES2020 特性从 Vue CLI 4.4.6 开始支持

1. 可选链接
2. 无效合并
3. Promise.prototype.allSettled
4. String.prototype.matchAll
5. 私有类字段
6. 动态导入增强功能
7. BigInt- 可能需要 ESLint 配置以避免在使用构造函数时出现 lint 错误