Vue Cli 4.4.6 是不是将 ES2020 脚手架到项目中

Posted 2023-02-22

【中文标题】Vue Cli 4.4.6 是不是将 ES2020 脚手架到项目中

【英文标题】：Does Vue Cli 4.4.6 scaffold ES2020 into the projectVue Cli 4.4.6 是否将 ES2020 脚手架到项目中

【发布时间】：2020-10-18 08:26:59

【问题描述】：

如果我使用最新的 Vue Cli（当前版本 4.4.6）运行 vue create my-new-app，是否会实现所有新的 ES2020 功能？ （我已经测试过“可选链接”并且似乎能够使用它）

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

相信ES2020已经正式完成了。让我知道这是否不正确。

【参考方案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-env 7.10.3 进行测试

---

从 Vue CLI 4.4.6 开始支持的 ES2020 功能

可选链接 无效合并 Promise.prototype.allSettled String.prototype.matchAll 私有类字段 动态导入增强 BigInt - 可能需要 ESLint 配置 to avoid a lint error when using the constructor