Like most of you - or @kyleshevlin at least - I seem to be really popular with Github lately. They've been sending me a lot of email, most of which says "One of your dependencies has a security vulnerability..."
A large number of the ones I receive have something to do with the Lodash dependency (and it seems a lot of yours do too) in repos for projects built with Express, React, all kinds of packages really. I know I never explicitly installed anything called Lodash, but these repos all have it so what is it, what does it do and how did it get there in the first place? Welcome to another episode of 'Rushton Investigates'...
The official website - Lodash.com tells me it's:
Lodash.com also says it can be installed with npm, it comes in a variety of builds, and it has methods for working with arrays, numbers, strings, objects etc. Cool. You can use these methods for iterating, doing stuff with values (like testing) and creating composite functions (applying one function to the results of another). To use the methods you call them on underscore and pass in the objects you want to use them on, as arguments. I didn't understand why at first but it seems that by convention you should map the Lodash library to the underscore character, eg:
This blog by Vincent D'amour has good examples of Lodash methods - https://medium.com/voobans-tech-stories/10-lodash-functions-everyone-should-know-334b372aec5d - including _.deburr, which removes accents from characters:
So that's briefly what it is and what it does, next question is how did it get there if I never installed it explicitly?
I thought google would answer this one pretty easily but no, or maybe I just wasn't googling the right thing. I've discovered that a key skill of the developer is knowing how to phrase your google search! It seemed logical that the libraries I was using to build my projects were using Lodash as a dependency, and a quick search for 'create-react-app lodash' returned this top result:
All very well, but when I looked at one of my repo's built with create-react-app, it wasn't there in the package.json, but it was in the package-lock.json, 84 times! 1 time was for Lodash itself, 9 for individual Lodash methods, the rest were required by other libraries. For instance, eslint requires the whole Lodash library, while css-loader requires only "lodash.camelcase".
To be honest I was still a bit confused at this point - what was the link between the stuff in those 2 files? How deeply nested were these dependencies? Discussing with a dev friend, he suggested a dependency graph would help me visualise the relationships - I wasn't familiar with the term but I managed to find some excellent resources:
- npm.broofa.com: Produces straightforward, easy to read graph
- npm.avanka.com: Visually impressive, dynamically builds a nice floaty graph but I didn't find it as easy to read
There are a lot of people who love both JS and UX/CSS. If we stop labeling people just as “JS developers” or “UX developers”, we can achieve a ceasefire in the current “JS vs. CSS” war and achieve a mutually benefiting peace.