implement the "correct solution" for babel config in vite

[mansona]

Context

The current babel.config.cjs file looks like this:

// eslint-disable-next-line n/no-missing-require

let config;

// TODO - remove this once we have the better solution for injecting stage1 babel config into a real config file
// this is needed because there are things (like ember-composible-helpers) that are now finding our babel config during
// their stage1 build and historically they will never (99% of the time) have found any babel config.
// we might need to keep something like this so that prebuild will never apply babel configs during stage1 i.e. a util
// function that wraps your whole babel config
if (
  process.env.EMBROIDER_PREBUILD ||
  process.env.EMBROIDER_TEST_SETUP_FORCE === "classic"
) {
  config = {};
} else {
  config = require("./node_modules/.embroider/_babel_config_");
}

module.exports = config;

It imports an .embroider/_babel_config_ file that is being built from the Embroider pre-build and re-exports it. We need to change this so that it is more "owned" by the app author. This means that we need to provide a function that will give you all the config necessary from classic (v1) addons that will be incorporated into a real babel config.

A really basic design of this new babel config would look like:

const { loadLegacyBabelPlugins } = require('@embroider/compat/babel');

module.exports = {
  "plugins": [
    // the default set of plugins needed by an ember-app - currently provided by ember-cli-babel

    // this function will load all the other plugins that were provided by classic addons
    ...loadLegacyBabelPlugins(),
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 1 Chrome versions",
            "last 1 Firefox versions",
            "last 1 Safari versions"
          ]
        }
      }
    ]
  ]
}

Task notes

• we should not rely on ember-cli-babel outputting any config, anything that ember-cli-babel adds should be part of the real babel config
• presets should always be in the top-level babel config and owned by the developer
• we should implement a functionality that does what skipBabel build option used to do. e.g. we could use the https://babeljs.io/docs/options#exclude option 👍 so we don't need to provide a custom escape hatch anymore.
• It's important to think this task in terms of what the app blueprint should look like and update it afterward.