Using config variables in package.json

By adding a config object into a package.json file, we can describe properties that can be used as environment variables. This is particularly useful when it comes to using npm as a build tool. If you haven't tried using npm for your build tool yet, check out my guide How to use npm as a build tool.

Let's start with a package.json file where we already have a scripts task set up for linting JS files found in a specific directory.

{
  "name": "Config Example",
  "version": "1.0.0",
  "description": "Using config variables in package.json",
  "author": "Adrian Payne",
  "scripts": {
    "lint": "eslint resources/js/scripts.js",
  },
  "devDependencies": {
    "eslint": "^1.10.3",
  }
}

Let's extract that target directory out of our scripts block and put it into a new config block like so.

"config": {
  "source": "resources/js/scripts.js"
},

We can now reference source value as an environment variable in our scripts command, by adding the key name to the end of $npm_package_config_ like so. This var name is a bit long winded, but easy to grasp and I find it very useful for managing multiple directory paths.

"config": {
  "source": "resources/js/scripts.js"
},
"scripts": {
  "lint": "eslint $npm_package_config_source",
},

For Windows users, environment variables follow a slightly different format, forgoing the $ and instead wrapping the var in %'s like so %npm_package_config_source%

This was a simplified example, but imagine a complicated build setup with multiple steps and input/output directories and I'm sure you'll see the usefulness.