State of npm scripts

npm scripts in recent years take by storm way we write frontend tasks. But how we write this scripts? Let's find out what GitHub repositories tell us about the current npm scripts trends.

Published: 2017-09-29

The story begins like most of them - with a blank page or empty "scripts": {}. Then you add some test, start tasks - those are the "default" ones. Quickly when the project grows you will end up adding scripts like lint, test:watch, deploy, sass etc. In next steps, you will add some more strange tasks, and you may wonder how other people write tasks?

Task names and roles of them tend to stick to them at the time of creation to end of the project. So it is quite important to choose right ones for a purpose they should be responsible for. Some of the people prefer one combo task which they turn on at the beginning of work and stop it when they turn off a computer, other prefer run only one specific task related to part of the job they are currently doing. Some of the tasks can be totally understandable to you, but if you are working on the project with not fronted team members, those tasks can be meaningless to them. There is no universal guide to the creation of npm scripts. But we can explore GitHub and find out current trends.

Data sample

Queries are performed with Google BigQuery, you can see all of them here.

For analysis, I choose repositories from GitHub with package.json in the root of the project. This gives 438298 results for future analysis.

Next step was an extraction of "scripts" object content from a package.json files. I filtered out results without "scripts" object or empty object, also tasks with empty content "" or "echo \"Error: no test specified\" && exit 1" ones. It turns out that 286140 (65% of all package.json) projects contain valid npm scripts, this is the base amount of projects for future calculations. Sum of all tasks was almost one million (974274), averagely people write 3.4 tasks per project (I'm aware of an average amount of legs problem).

Number of tasks

Number of tasks histogram

It turns out that distribution of tasks amounts is heavily skewed towards the most popular option: 1 task (almost half of the projects with npm scripts uses only on task). Project app-js/a2was contains the largest number of tasks - 96.

Tasks names

Tasks names histogram

Results show tremendous domination of test related task names: test, pretest, coverage, test:watch, coveralls, e2e, protractor, cover, preprotractor, test-single-run and more outside of this chart. It's nice to see that test task is the most popular one. There can be some factors which can influence the amount of this task:

  • npm init asks you about one task, and the name of it is test. That's why I have to get rid of "echo \"Error: no test specified\" && exit 1" since it is task body if you don't answer this question
  • unfortunately, word "test" can be used if someone doesn't know how to name something or try if something work (I don't believe if you never name variable as test after a long time of unsuccessful debugging)

start task is also "special one" - it can be used without word "run" in the command line, npm run start can be replaced with npm start (the same goes for: "npm test" and "npm stop"). This creates an impression that task start is "the default one" and should be included in the project (despite it's purpose).

Tasks content

Tasks content histogram

Due to a strict comparison of tasks (there wasn't some kind of "elasticsearch") content percents of them are quite low. In this comparison technologies with fewer options (flavors) in command line takes higher places. For example, grunt ecosystem tends to use fewer options in cli compare to webpack.

The winner of "the most popular" task goes to grunt test, every 50 tasks you will find this one. Surprisingly high is npm install, I'm wondering what the purpose of this task is, do people write npm run install to perform npm install? Bower appears on this graph in two characters: bower install and bower install --config.interactive=false, the second one is more reasonable since it skips manual answer on bower questions.

Technologies in tasks

Technologies in tasks histogram

Technologies are count as an appearance of the keyword in project scripts divided by the number of all project with npm scripts. You can read it as: almost every fourth project on a GitHub with npm scripts uses mocha. Additionally, I divide technology into groups.

It is surprising how often mocha is used, it's popularity can be explained by the fact that mocha is more framework agnostic in contrast to protractor, jasmine or jest.

The most popular tasks runners / transpilators grunt, gulp, and webpack appear in chronological order of pick of their popularity. This numbers can be justified by the fact that this data is collected from the beginning of GitHub. Shell scripts .sh are also used as some sort of task-runner, in a fact .sh is one of the most popular options in deploy tasks (8.25% of deploy tasks uses .sh), the only gulp is more popular in deploy (9.92%).

You should notice that for example, webpack is more popular than babel, but substantially webpack-cli is more popular than babel-cli since I'm looking for keywords in tasks. So for example task "webpack -p" can use (and probably is using) babel inside it, but it counts only as webpack technology. Due to described query limitation popularity of babel is an incredible high.

Detail view on the most popular tasks

In the next section I narrowed results for the most popular tasks: test, start, build and lint.

test task content

test task content histogram

Results show that two of top 3 tasks are the simple proxy, one by grunt and second by gulp. mocha occurs the most often in tasks (you can see it in a next section). 0.71% of test tasks is "test": "test", does it make any sense or people don't know what they are doing?

test task technologies

test task technologies histogram

Searching for the most popular technologies in test tasks shows the dominance of mocha. Next in order of popularity test type technologies are: karma, jest, tap, istanbul, ava and jasmine. There is also quite a big representation of lint type technologies on this list. This is understandable because linting can be treated as a subset of tests.

start task content

start task content histogram

Top 5 results are related to the startup of a server, whereof 4 of them uses pure node. The most of tasks are related to setting up and running server. The question is: are these configurations of development or production servers? I'm surprised by the lack of popularity webpack in this chart.

start task technologies

start task technologies histogram

Results discover an important role of framework-specific technologies next to the server and compiler types of technologies. Task-runners/transpilators are also common like in the most of other tasks.

build task content

build task content histogram

It looks like build task is mostly a proxy for ember / grunt / gulp. webpack often occurs in this chart, but surprisingly the most popular one is without production flag, maybe people write webpack config only for production environments or simply doesn't care.

build task technologies

build task technologies histogram

No surprisingly webpack, babel, gulp, and browserify teaks the highest places, but ember is a surprise. Additionally, task-runners/transpilators and compilers you can find some helper tools like cross-env or rm command.

Comparison of start, build and dev

Name of start task is not precisely defined what it suppose to start. Is it starts development environment or application server? By comparison it with build and dev task we can find out similarities/differences between them.

You can read this charts as:

  • points on diagonal presents similarity
  • if the point is more distant from diagonal it's more specific to one of the tasks
  • points in the top right corner represents technologies popular in both tasks
  • points in bottom left corner represents technologies not popular in both tasks
  • points in the top left or bottom right corner represents technologies popular only in one task and not popular in another task
Compare start and build plot

As you can see there is a quite big distribution of points. We can tell that transpilator/compiler like webpack, babel, browserify and rollup are more specific to build task. Testing and linting are not so popular in both tasks but linting is more used in build task. Clearly, as you can expect there is a strong representation of server technologies more used in start rather than in build. react-native is striking more used in start task, maybe it due to some framework designs.

Compare start with dev plot

Distribution of points is less spread as opposed to the previous chart. Surprisingly both task uses similarly server technologies (I thought they will be more specific to start task). rollup stands out in favor of usage in dev task. There is a clear island of framework technologies - they are more used in start task.

Summary

  • There is almost half of a million package.json in a root of project on the GitHub
  • 65% of them uses npm scripts
  • almost half of the projects have only one npm script task
  • 20.82% of tasks are named as test
  • the most popular task is grunt test
  • mocha is the most popular technology used in tasks
  • a lot of project uses grunt and gulp in tasks
  • start task reveals similarity to dev task