Building a custom Lodash library with NPM

Let's use the command line (and NPM scripts) to build lodash; but with only the methods needed by our application.

We're going to be using lodash-cli installed and accessed via npm. Using Lodash's include=... utility from the lodash custom builds page, we will build the library with only the methods used in our source files by searching through our application for references to Lodash.

Firstly, we need to set up a package.json in our app. Once we've done this, we can install the npm modules we need:

npm install lodash-cli --save-dev  

After lodash is installed, we can go ahead and start building our script. In the scripts: {} section of our package.json we need to define a new script -- let's call this "lojack".

package.json

If you only want the code, it's right here. Just swap out the folder paths accordingly.

{
  "name": "myapp",
  // ...
  "scripts": {
    "lojack": "lodash -o ./dist/lodash.js include=$( grep -roh \"_\\.[[:alpha:]]*\" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr \"\n\" \",\" )"
  }
  // ...
}

Our script can now be run from the command line, or during the build process with:

npm run lojack  

Let's break it down

Now, that script might look like a mess if you're not Neo from The Matrix, or a seasoned command-line guru... so let's dissect it.

Neo owns the command line...

grep

Starting at the bottom, the most fundamental part of this script is grep, we will be using this to search through all the javascript files in the /src/ folder and returning any _.method type methods;

grep -roh "_\\.[[:alpha:]]*" ./src --include=*.js  

This will recursively (-r) search the ./src folder for .js files (--include=*.js). Only returning the matched characters (-o) without the filename/line (-h).

# we should then have a result like:
_.filter  
_.each  
_.filter  
_.map  
_.escape  
_.has  
_.has  
_.map  

This is great, but it's not usable yet.

sort

We don't really need to sort the result, but I like to. This method pretty much speaks for itself. We just pipe the result of grep in to sort.

# the result is now:
_.each  
_.escape  
_.filter  
_.filter  
_.has  
_.has  
_.map  
_.map  

uniq

Next we will remove all duplication of methods. lodash-cli could get confused if we supply it with multiple filters and such. So we pipe the result of sort in to uniq.

# result now looks like:
_.each  
_.escape  
_.filter  
_.has  
_.map  

cut

The next step is to pipe the output from uniq in to cut, this will allow us to remove the _. prefix which is not needed.

cut -b 3-  

The option -b 3- basically says: "Take the third byte of each line until the end of that line".

# which will give us:
each  
escape  
filter  
has  
map  

tr

Finally, we need to change those \n (new lines) in to , (commas). We use translate utility to do this;

tr "\n" ","  

Which just says: "turn any new lines in to commas".

# which will give us:
each,escape,filter,has,map  

Finally!

Now we have a result that is usable with the include= option, we just need to wrap it all up in a $() which will evaluate the commands to a string.

$( grep -roh "_\\.[[:alpha:]]*" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr "\n" "," )

And then pass it to the lodash builder.

lodash -o ./dist/lodash.js include=$( grep -roh "_\\.[[:alpha:]]*" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr "\n" "," )  

Now we should have two files in the ./dist/ folder which have the names: lodash.js and lodash.min.js which contain only the methods we need for our application!

Huzzah.

This command can now be run directly from the command line. All we do is tell npm to run it as shown at the top of this post. We also need to escape quote marks for .json syntax.


Note: this tutorial is based on unix systems, if you want to achieve it with windows, I suggest installing something like babun for a unix-like environment.