refactor(babel-preset-app): simplify babel preset config (#6087)

packages/babel-preset-app/README.md

@@ -21,7 +21,7 @@ Usually, no additional configuration is required. If needed though, there is an
 
 ```js
 babel: {
-  presets({ isServer }) {
+  presets(env, [ preset, options ]) {
     return [
       [ "@nuxt/babel-preset-app", options ]
     ]
@@ -29,6 +29,10 @@ babel: {
 }
 ```
 
+`env` is an object which contains `envName` (`server`, `client`, `modern`) and all `nuxtEnv` properties (`isDev`, `isServer`, `isClient`, `isModern`, `isLegacy`)
+
+`preset` is the preset package name `@nuxt/babel-preset-app`
+
 `options` is an object with parameters, for example:
 
 ```js
@@ -37,11 +41,10 @@ const options = {
 }
 ```
 
-Below is a list of all available parameters:
+Below is a list of all available `options` parameters:
 
 ### Options
 
-* **buildTarget** - passed in through the Builder, either `"server"` or `"client"`
 * **configPath** - [`@babel/preset-env` parameter](https://babeljs.io/docs/en/babel-preset-env#configpath)
 * **forceAllTransforms** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#forcealltransforms)' parameter
 * **debug**, default  `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#debug)' parameter
@@ -50,9 +53,8 @@ Below is a list of all available parameters:
 * **exclude** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#exclude)' parameter
 * **ignoreBrowserslistConfig**, defaults to value of `modern` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig)' parameter
 * **include** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#include)' parameter
-* **jsx**, default truish, can be a an object passed as params to [@vue/babel-preset-jsx`](https://www.npmjs.com/package/@vue/babel-preset-jsx)
+* **jsx**, default true, can be a an object passed as params to [@vue/babel-preset-jsx`](https://www.npmjs.com/package/@vue/babel-preset-jsx)
 * **loose**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#loose)' parameter and also sets `loose=true` for `@babel/plugin-proposal-class-properties`
-* **modern** passed by builder, either `true` or `false`
 * **modules**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#modules)' parameter
 * **polyfills**, default `core-js@2: ['es6.array.iterator','es6.promise','es6.object.assign','es7.promise.finally']`, `core-js@3: ['es.array.iterator','es.promise','es.object.assign','es.promise.finally']`, more [in the corresponding repository](https://github.com/zloirock/core-js)
 * **shippedProposals** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#shippedproposals)' parameter
@@ -69,14 +71,16 @@ There are [detailed docs](https://babeljs.io/docs/en/babel-preset-env#options) f
 export default {
   build: {
     babel: {
-      presets({ isServer }) {
+      presets({ envName }) {
+        const envTargets = {
+          client: { browsers: ["last 2 versions"], ie: 11 },
+          server: { node: "current" },
+        }
         return [
           [
             "@nuxt/babel-preset-app",
             {
-              targets: isServer
+              targets: envTargets[envName]
-                ? { node: "current" }
-                : { browsers: ["last 2 versions"], ie: 11 }
             }
           ]
         ]
@@ -98,12 +102,12 @@ yarn add --dev core-js@2 @babel/runtime-corejs2
 export default {
   build: {
     babel: {
-      presets({ isServer }) {
+      // envName: server, client, modern
+      presets({ envName }) {
         return [
           [
-            require.resolve('@nuxt/babel-preset-app'),
+            '@nuxt/babel-preset-app',
             {
-              buildTarget: isServer ? 'server' : 'client',
               corejs: { version: 3 }
             }
           ]

packages/babel-preset-app/src/index.js

@@ -43,23 +43,20 @@ function getPolyfills (targets, includes, { ignoreBrowserslistConfig, configPath
   return includes.filter(item => isPluginRequired(builtInTargets, builtInsList[item]))
 }
 
-module.exports = (context, options = {}) => {
+module.exports = (api, options = {}) => {
   const presets = []
   const plugins = []
 
-  const modern = options.modern === undefined
+  const envName = api.env()
-    ? context.env('modern')
-    : Boolean(options.modern)
 
   const {
     polyfills: userPolyfills,
-    buildTarget,
     loose = false,
     debug = false,
     useBuiltIns = 'usage',
     modules = false,
     spec,
-    ignoreBrowserslistConfig = modern,
+    ignoreBrowserslistConfig = envName === 'modern',
     configPath,
     include,
     exclude,
@@ -76,23 +73,34 @@ module.exports = (context, options = {}) => {
     corejs = { version: Number(corejs) }
   }
 
-  let { targets } = options
+  const defaultTargets = {
-  if (modern === true) {
+    server: { node: 'current' },
-    targets = { esmodules: true }
+    client: { ie: 9 },
-  } else if (targets === undefined && typeof buildTarget === 'string') {
+    modern: { esmodules: true }
-    targets = buildTarget === 'server' ? { node: 'current' } : { ie: 9 }
   }
 
-  let polyfills
+  let { targets = defaultTargets[envName] } = options
-  if (modern === false && useBuiltIns === 'usage' && buildTarget === 'client') {
+
-    polyfills = getPolyfills(targets, userPolyfills || getDefaultPolyfills(corejs), {
+  // modern mode can only be { esmodules: true }
-      ignoreBrowserslistConfig,
+  if (envName === 'modern') {
-      configPath,
+    targets = defaultTargets.modern
-      corejs
+  }
-    })
+
+  const polyfills = []
+
+  if (envName === 'client' && useBuiltIns === 'usage') {
+    polyfills.push(
+      ...getPolyfills(
+        targets,
+        userPolyfills || getDefaultPolyfills(corejs),
+        {
+          ignoreBrowserslistConfig,
+          configPath,
+          corejs
+        }
+      )
+    )
     plugins.push([require('./polyfills-plugin'), { polyfills }])
-  } else {
-    polyfills = []
   }
 
   // Pass options along to babel-preset-env
@@ -132,7 +140,7 @@ module.exports = (context, options = {}) => {
     regenerator: useBuiltIns !== 'usage',
     corejs: false,
     helpers: useBuiltIns === 'usage',
-    useESModules: buildTarget !== 'server',
+    useESModules: envName !== 'server',
     absoluteRuntime
   }])
 

packages/webpack/src/config/base.js

@@ -80,24 +80,26 @@ export default class WebpackBaseConfig {
   }
 
   getBabelOptions () {
+    const envName = this.name
     const options = {
       ...this.buildContext.buildOptions.babel,
-      envName: this.name
+      envName
     }
 
     if (options.configFile !== false) {
       return options
     }
 
-    const defaultPreset = [
+    const defaultPreset = [ require.resolve('@nuxt/babel-preset-app'), {} ]
-      require.resolve('@nuxt/babel-preset-app'),
-      {
-        buildTarget: this.isServer ? 'server' : 'client'
-      }
-    ]
 
     if (typeof options.presets === 'function') {
-      options.presets = options.presets({ isServer: this.isServer }, defaultPreset)
+      options.presets = options.presets(
+        {
+          envName,
+          ...this.nuxtEnv
+        },
+        defaultPreset
+      )
     }
 
     if (!options.babelrc && !options.presets) {