2

If I run vue create my-new-app using the latest Vue Cli (currently version 4.4.6) will all the new ES2020 features be implemented? (I've tested "optional chaining" and seem to be able to use that)

If so, how can I tell from the scaffolded code? I'm seeing @vue/cli-plugin-babel/preset in babel.config.js, does that do it?

I believe ES2020 has been officially completed. Let me know if that's incorrect.

Dedicated Managers
  • 323
  • 3
  • 9

1 Answers1

1

The Babel plugins indeed allow compilation of ES2020 features. You can view which plugins are in use by enabling debug before running the build:

// babel.config.js
module.exports = {
  presets: [
    // BEFORE:
    // '@vue/cli-plugin-babel/preset'
    ['@vue/cli-plugin-babel/preset', { debug: true }]
  ]
}

The debug output will look like this:

⠇  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.

Tested with Node 14, Vue CLI 4.4.6, and @babel/preset-env 7.10.3 on macOS Catalina

ES2020 features supported as of Vue CLI 4.4.6

  1. optional chaining
  2. nullish coalescing
  3. Promise.prototype.allSettled
  4. String.prototype.matchAll
  5. private class fields
  6. dynamic imports enhancement
  7. BigInt - might require an ESLint config to avoid a lint error when using the constructor
tony19
  • 125,647
  • 18
  • 229
  • 307