Conditionally use different options for babel configuration

[dilanx]

Conditionally use different options for babel configuration

[patricklafrance]

Hi @CloudPower97

You could do something like this:

module.exports = function({ env }) {
    let babelPlugins = [PLUGINS_COMMON_TO_ALL_ENV];

    if (env === "development") {
         babelPlugins = babelPlugins.concat([PLUGINS_FOR_DEV_ENV]);
   } else if (env === "production") {
         babelPlugins = babelPlugins.concat([PLUGINS_FOR_PROD_ENV]);
   }

    return {
        babel: {
            plugins: babelPlugins
        }
    };
}

[patricklafrance]

Another option would be to add another helper to craco.

Something like a define function that would accept a function with the following signature as parameter ({ env }) => undefined | any value.

It would work like this:

babel: {
      plugins: define(({ env }) => {
           let babelPlugins = [PLUGINS_COMMON_TO_ALL_ENV];

           if (env === "development") {
                return babelPlugins.concat([PLUGINS_FOR_DEV_ENV]);
           } else if (env === "production") {
                return babelPlugins.concat([PLUGINS_FOR_PROD_ENV]);
           }
      })
}

Not sure about the name define.

[patricklafrance]

I will close this issue since there isn't any new comments for 8 days.

[netojose]

I had this necessity, a plugin should to work only in production environment. So, I did this:

const isProd = process.env.NODE_ENV === 'production'
const babelPlugins = isProd ? [ONLY_PRODUCTION_PLUGIN] : []

module.exports = {
  babel: {
    plugins: babelPlugins,
  },
}