Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Import a Single Lodash Function?

People also ask

Do you need to import lodash?

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.

How do I add lodash?

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.

How do you require lodash?

= 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:

  • You have to install the whole lodash package (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 this
  • The resulting bundle when using tools like webpack will be slightly bigger; I found out that bundle sizes with a minimal code example of isEqual 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,
    ...
  }
}