Nuxt.js: Add experimental preset "@babel/preset-modules" for modern build

[academici]

What problem does this feature solve?

The result is improved bundle size and performance, while supporting the same browsers.

[simllll]

+1 for this

https://github.com/babel/preset-modules

we are testing this right now, seems stable and could be a replacement for babel-env for modern build!

[j1gs4w]

currently we added it for modern build like this:

if (envName === 'modern') {
    return [
        '@babel/preset-modules',
        {
            plugins: [
                ['@babel/plugin-proposal-decorators', { legacy: true }],
                ['@babel/plugin-proposal-class-properties', { loose: true }],
                ['@babel/plugin-transform-runtime', { helpers: true }]
            ]
        }
    ];
}

[academici]

@simllll what bundle size saving?

[j1gs4w]

@academici it reduced the overall size from 414 to 390 KB (gzipped).
Especially the commons bundle which includes the vue runtime, router, etc. got smaller (from 63 to 47KB)

[clarkdo]

Thanks for the feature request. 😸

I think @j1gs4w solution is a proper way if you want to use @babel/preset-modules.

I'm considering if we should bring into Nuxt as default preset, some issues I can think is:

• From babel 7.8.0, some ECMA 2020 features (optional-chaining, nullish-coalescing-operator ) have been introduced into @babel/preset-env, but @babel/preset-modules does't support the new syntax transforming.
• @babel/preset-modules is outside babel core repo, so it may not sync the api and features with latest babel timely.
• The preset doesn't support same configs as preset-env options, so it's a breaking change for users and they may also lose possibilities for these configs

Maybe we could extract @j1gs4w solution into a Nuxt module.

[matthieusieben]

Note that if you use JSX syntax, you may want to add the @vue/babel-preset-jsx preset:

if (envName === 'modern') {
  return [
    [
      '@babel/preset-modules',
      {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }],
          ['@babel/plugin-transform-runtime', { helpers: true }],
        ],
      },
    ],
    ['@vue/babel-preset-jsx', {}],
  ]
}

[dansullivan86]

Unless I as misunderstanding it looks like its now possible to get the same benefits whilst continuing to use preset-env? https://babeljs.io/blog/2020/03/16/7.9.0 We just need to expose the new bugfixes option

[clarkdo]

@dansullivan86 PR: https://github.com/nuxt/nuxt.js/pull/7144

You can set this option after it gets shipped:

export default {
  build: {
    babel: {
      presets: ['@nuxt/babel-preset-app', { bugfixes: true }]
  }
}