feat(webpack): extendable functional babel.presets and babel envName

[clarkdo]

Hide Comment

What's current situation

Current babel config in Nuxt.js is kind of complex and limited:

1. build.babel.presets supports Function, Array which may be confusing
2. Hard to apply customized config
3. Change options for @nuxt/babel-preset-app needs more useless code (via functional babel.presets)

What's in this pr

This pr suggests using babel.config.js in rootDir which aligns to babel default behaviour, user can easily config babel like:

// babel.config.js
module.exports = function (api) {
  return {
    presets: [
      require.resolve('@nuxt/babel-preset-app'),
      {
        buildTarget: api.env('client') ? 'client' : 'server'
      }
    ],
	plugins: [...]
  }
}

For more complex scenario, it's also easier which is not possible in current Nuxt.js:

// babel.config.js
module.exports = function (api) {
  const env = api.env()
  api.cache.using(() => env)

  const presets = []
  const plugins = []

  if (env === 'server') {
    // set server presets/plugins
  } else if (env === 'client') {
    // set client presets/plugins
  } else if (env === 'modern') {
    // set modern presets/plugins
  }

  return { presets, plugins }
}

What's next (Nuxt.js v3)

I suggest that we remove build.babel and use native babel config way, actually babel-loader has already been using babel options as options of loader instead of self-defined options.

The current default preset config can be kept as default value when no babel config file found.

After discussion with @pi0 , we think keeping good DX and avoiding conflicts are very important.

So I have changed the pr:

1. Support api like build.extend for functional presets:

preset is @nuxt/babel-preset-app
options are here

// nuxt.config.js
export default {
  build: {
    babel: {
      presets({ isServer }, [preset, options]) {
        // change options directly
        options.targets = ...
        options.corejs = ...

        // or return whole preset list

        return [
          [
            preset, {
              buildTarget: ...,
              corejs: ...,
              ...,
              ...options
          }],
          [
            ...
          ]
        ]
      }
    }
  }
}

2. Add envName for users are using configFile

⚠️ NOTE⚠️ : configFile is not suggested to be used only if you know what you're doing

// nuxt.config.js
export default {
  build: {
    babel: {
      configFile: path.resolve(rootDir, 'babel.config.js')
    }
  }
}

// babel.config.js
module.exports = function (api) {
  const env = api.env()
  api.cache.using(() => env)

  const presets = []
  const plugins = []

  if (env === 'server') {
    // set server presets/plugins
  } else if (env === 'client') {
    // set client presets/plugins
  } else if (env === 'modern') {
    // set modern presets/plugins
  }

  return { presets, plugins }
}

[codecov-io]

Codecov Report

Merging #5637 into dev will decrease coverage by 0.03%.
The diff coverage is 85.71%.

@@            Coverage Diff            @@
##             dev    #5637      +/-   ##
=========================================
- Coverage   95.7%   95.67%   -0.04%     
=========================================
  Files         81       81              
  Lines       2633     2634       +1     
  Branches     670      671       +1     
=========================================
  Hits        2520     2520              
- Misses        95       96       +1     
  Partials      18       18

Impacted Files	Coverage Δ
packages/webpack/src/config/modern.js	100% <100%> (ø)	⬆️
packages/webpack/src/config/base.js	94.62% <83.33%> (-0.94%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8327023...acd5d29. Read the comment docs.

[pi0]

A note that could be probably useful for documentation. It is also supported that user directly modify second argument of presets and return nothing :) @clarkdo am i right?

[clarkdo]

@pi0 You’re right, bro, it’s already in the code of pr message, maybe not well organized,I’ll refine it and also create doc or

[atinux]

Nice work on this PR @clarkdo

It keeps simplicity while giving advanced configuration for experts.

It could be nice to add a PR to update https://nuxtjs.org/api/configuration-build#babel

[manniL]

Sorry that I missed the conversation here:

What's the current stand regarding applying a .babelrc or babel.config.js? Isn't Nuxt ignoring them by default right now?

[clarkdo]

@manniL The build.babel in nuxt.config.js is still preferred.

Although we support babel.congfig.js (disabled by default), but it's not suggested unless if user knows exactly what is the influence.

[manniL]

@clarkdo Ah, got it! Thanks ☺️