How to correctly include specific functions of the popular lodash library in your web JavaScript project without having to import the entire library. Lodash is an extremely popular JavaScript library that provides a lot of useful functions for working with strings, arrays and objects in your web projects.
Using your command line, install Lodash in your project folder. And then import it at the top of your JavaScript file in which you would like to use it. You're ready to use Lodash! You can now access all of Lodash's functions inside the “_” object.
= require('lodash'); If you want to use lodash in your front-end, supposing you are using bower , you need to include lodash in your bower. json , do bower install and including lodash. js in your index by hand or using a tool to inject it like Gulp or Grunt .
You can install lodash.isequal
as a single module without installing the whole lodash package like so:
npm install --save lodash.isequal
When using ECMAScript 5 and CommonJS modules, you then import it like this:
var isEqual = require('lodash.isequal');
Using ES6 modules, this would be:
import isEqual from 'lodash.isequal';
And you can use it in your code:
const obj1 = {username: 'peter'};
const obj2 = {username: 'peter'};
const obj3 = {username: 'gregory'};
isEqual(obj1, obj2) // returns true
isEqual(obj1, obj3) // returns false
Source: Lodash documentation
After importing, you can use the isEqual
function in your code. Note that it is not a part of an object named _
if you import it this way, so you
don't reference it with _.isEqual
, but directly with isEqual
.
Alternative: Using lodash-es
As pointed out by @kimamula:
With webpack 4 and lodash-es 4.17.7 and higher, this code works.
import { isEqual } from 'lodash-es';
This is because webpack 4 supports the sideEffects flag and lodash-es
4.17.7 and higher includes the flag (which is set to false
).
Why Not Use the Version With the Slash? Other answers to this question suggest that you can also use a dash instead of a dot, like so:
import isEqual from 'lodash/isequal';
This works, too, but there are two minor drawbacks:
npm install --save lodash
), not just the small separate lodash.isequal package; storage space is cheap and CPUs are fast, so you may not care about thisisEqual
are on average 28% bigger (tried webpack 2 and webpack 3, with or without Babel, with or without Uglify)If you just want to include isEqual
and not the rest of the lodash
functions (useful for keeping your bundle size small), you can do this in ES6;
import isEqual from 'lodash/isEqual'
This is pretty much the same as what's described in the lodash
README, except that there they use require()
syntax.
var at = require('lodash/at');
With webpack 4 and lodash-es 4.17.7 and higher, this code works.
import { isEqual } from 'lodash-es';
This is because webpack 4 supports sideEffects
flag and lodash-es 4.17.7 and higher includes the flag (which is set to false
).
Edit
As of version 1.9.0, Parcel also supports "sideEffects": false
, threrefore import { isEqual } from 'lodash-es';
is also tree shakable with Parcel.
Not related to webpack but I'll add it here as a lot of people are currently moving to typescript.
You can also import a single function from lodash using import isEqual from 'lodash/isEqual';
in typescript with the esModuleInterop
flag in the compiler options (tsconfig.json)
example
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es6", "dom"],
"moduleResolution": "node",
"esModuleInterop": true,
...
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With