Adrian Payne | Frontend Dev Blog

Adrian Payne
Frontend Engineer

Who am I?

Adrian spends most of his time being a Senior Frontend Engineer in Hamburg. When he's not doing that, he likes to sing and play hurling with Hamburg GAA.


What I write about


Why the domain?

I'm a frontend developer and I'm from Ireland :)


Recent Posts


Sign up for an awesome Lootcrate!

Using config variables in package.json

In which we discover how to use the config object in package.json to set environment variables we can use in npm scripts.

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.


Posted in npm on by

Share this post:
This site is run on Digital Ocean. Sign up for yours!