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.
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 filter
s 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.