Vite: Unable to use recent JS syntax (babel)

[Sceat]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I don't find a way to configure Vite/Babel

The issue is probably not a bug but more a misunderstanding of how to configure the build

./vite.config.js

import babel from '@rollup/plugin-babel'
import path from 'path'

module.exports = {
  plugins: [
    babel({
      babelHelpers: 'bundled',
      include: [
        // these modules are using private method syntax
        path.resolve('node_modules/@hydre/shimio'),
        path.resolve('node_modules/event-iterator')
      ],
      plugins: [
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["@babel/plugin-proposal-numeric-separator"],
        ["@babel/plugin-proposal-private-methods", { loose: true }]
      ]
    })
  ]
}

./package.json > devDependencies

  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-proposal-numeric-separator": "^7.10.1",
    "@babel/plugin-proposal-private-methods": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@rollup/plugin-babel": "^5.0.3",
    "@vue/compiler-sfc": "^3.0.0-beta.14",
    "pug": "^3.0.0",
    "stylus": "^0.54.7",
    "vite": "^0.20.0"
  }

Reproduction

not needed

System Info

• required vite version: "^0.20.0"
• required Operating System: arch
• required Node version: 14.4

Logs (Optional if provided reproduction)

The error is quite easy to understand but after trying all kind of configuration setup it still doesn't seems to work

Using vite build --debug

  frame: '43:   }\n' +
    '44: \n' +
    '45:   get #overflowing() {\n' +
    '          ^\n' +
    '46:     return this.#ws.bufferedAmount > this.#threshold\n' +
    '47:   }',
  hook: 'transform',
  code: 'PLUGIN_ERROR',
  plugin: 'commonjs',

Error: Error parsing JavaScript expression: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (1:1)

[yyx990803]

Plugins in vite.config.js expect Vite plugins, not Rollup plugins. Read the types for a better understanding of how to write a custom transform.