Using NPM Scripts Correctly
package.json. This file, as the name extension suggests, contains a JSON object about the project. The follow snippet shows a very simple example of what a
package.json file might contain, for more information about what each section means browsenpm will offer a much better explanation. If you have not seen a
package.json file before, it might be best if you do some quick reading before continuing reading.
Now we got that out of the way, let’s talk about why in my opinion how to set up projects correctly by using NPM scripts.
NPM scripts are actually super customisable and powerful, it is a shame that they are not always being utilised fully/correctly. You can run simple commands to do something like cleaning up projects or more complex chained commands to combine, compile and build projects.
So how do they work? Within
scripts object in the example above, there are two NPM commands
test. When declared in
package.json like this, it means if you navigate to the directory in the terminal and you can execute them by typing
npm run start and
npm run test (
npm start or
npm test also works because
test are reserved keywords). In our case,
npm start will start a node app using a file called
npm test will print out “Error: no test specified” in the terminal.
This is probably the most important reason in my opinion. Tools such as Bower, Gulp and etc requires to be installed as a global NPM package, like most cases in software development global is never good. This causes a number of problems, just imagine:
- You are working on two different projects but they require different versions of the same NPM package (e.g. web driver). If you install it globally, how much of a pain will this be to constantly change between them?
- What if you are on a newer version of a package than your co-workers? Or even worse, what if everyone is a different version to the production environment? When things start failing, it will be hard to track down issues and creates confusion.
You might ask why do people keep installing NPM packages as global then? Well, if you want to run something like
gulp test in the terminal Gulp must be installed as a global package, otherwise,
gulp is undefined.
How do NPM scripts fix this? Well, we don’t have this issue because NPM script will try to find the relevant packages within
node_modules directory. This means that I can run
npm test (assuming the script is
"test": "gulp test"), and it will use the locally installed version of Gulp. The local package version should always be defined in the
devDependencies objects within
package.json file. Therefore, everyone will be using the same version of Gulp this way.
"test": "gulp test", then run
npm run test in the terminal to execute it. So when developing I can just run one command, instead of a whole bunch just to get it to build my project.
As mentioned before NPM will allow chaining commands, if you want to something quite complicated this is super useful. The snippet below shows what a chained command looks like.
After looking at the chained commands you might think all the
npm run is a bit ugly when chaining scripts. Well, it happens someone already thought of this. There’s a nice package called npm-run-all which lets you write much nicer chained commands. Using this package, you can write nice chained commands in the next section.
As of now, the follow snippest shows my recommended way of using NPM sripts and structuring projects.
The above example is taken from one of my recent project Finacial Calc if you are interested in looking at the folder structures and etc.