Sign up for Digital Ocean VPS and get $10 credit FREE!

Cleaner NPM Scripts with Better-Npm-Run2 min read

Source Code

Does your package.json’s script section look like this:

{
  "name": "better-npm-run",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build:dev": "NODE_ENV=dev react-scripts build --flagone --flagtwo --flagthree",
    "build:prod": "NODE_ENV=production react-scripts build --flagone --flagtwo --flagthree",
    "test": "NODE_ENV=production react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

What if I told you that it can be rewritten as this:

  "scripts": {
    "start": "bnr start",
    "build:dev": "bnr build:dev",
    "build:prod": "bnr build:prod",
    "test": "bnr test",
    "eject": "bnr eject"
  },

Neat right?  The magic behind this is a nifty little module call better-npm-run This module can transform your cluttered, messy script section of your package.json into a cleaner, easier to read format.  The analogy I like to give for this is the alias command from command line:

alias ll="ls -al"

when this is set, all you have to do in the command line is to type ll and it will process that as ls -al

better-npm-run is similar in that it will allow you to define your “aliases” in the betterScripts section of your package.json file:

  "betterScripts": {
    "start": "react-scripts start",
    "build:dev": "NODE_ENV=dev react-scripts build --flagone --flagtwo --flagthree",
    "build:prod": {
      "command": "react-scripts build --flagone --flagtwo --flagthree",
      "env": {
        "NODE_ENV": "production"
      }
    },
    "test": {
      "command": "react-scripts test --env=jsdom",
      "env": {
        "NODE_ENV": "production"
      }
    },
    "eject": "react-scripts eject"
  }

In the sample above, I can now do

npm run build:prod

and it will execute the command that was aliased in the betterScripts section with the same name.

One cool thing about betterScripts is that it allows you to define your command alias in two ways, either by string:

"betterScripts": {
    "build": "NODE_ENV=production commandgoeshere --flag"
}

or in an object notation:

"betterScripts": {
    "build": {
        "command": "commandgoeshere --flaghere",
        "env": {
           "NODE_ENV": "production"
         }
   }
}

where you can set the command and environment variables for the command to run in.  This feature also works if you have a .env file then whatever you specify in there will be loaded with every command.  However, if you define a value within betterScripts section, then it will take that value over those defined in .env

Last but not least, there’s an alias for better-npm-run command with bnr:

  "scripts": {
    "build": "bnr build:dist",
    "test": "bnr test"
  }

neat!

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

Related Posts

Webdev News

Loading...
    More News