score:11

here's an alternative approach to sharing/alternating configurations based upon the current node_env:

package.json

"scripts": {
  "build": "node_env=production next build",
  "dev": "node_env=development next dev",
  "test" : "node_env=test jest"
   ...etc
}

babel.config.js (must be a .js file)

const { node_env } = process.env;

const inproduction = node_env === "production";
const indevelopment = node_env === "development";

module.exports = api => {
  /* 
    alternatively, you can utilize api.env() to get the current node_env:
    const inproduction = api.env("production");
    const indevelopment = api.env("development");

    if using api.env(), then these must be defined before invoking the cache
  */
  api.cache.using(() => process.env.node_env);

  return {
    presets: ["next/babel"],
    plugins: [
      [
        "styled-components",
        {
          ssr: true,
          displayname: indevelopment,
          preprocess: inproduction,
        },
      ],
      ["import", { libraryname: "antd", librarydirectory: "lib" }],
      inproduction && "react-remove-properties",
    ].filter(boolean), // this will filter any falsy plugins (such as removing react-remove-properties when not in production)
  };
};

score:77

set up different environments in your .babelrc

{
  "env": {
    "dev": {
       "presets": ["es2015"],
       "plugins":["x"]
     },
    "test": {
      "presets": ["es2015"]
    }
  }
}

and then run babel after you have set your babel_env

babel_env=test <commandhere> or babel_env=dev <commandhere>

if you don't set babel_env, babel will use the node_env value. if you don't set either babel_env nor node_env, it will use 'development'.

code below:

function getenv(defaultvalue = "development") {
  return process.env.babel_env || process.env.node_env || defaultvalue;
}

Related Query

More Query from same tag