How to Import a Single Lodash Function?

Question

Using webpack, I\'m trying to import isEqual since lodash seems to be importing everything. I\'ve tried doing the following with no success:

imp         


        

Answer 1

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');

Answer 2

Lodash lists a couple of options in their README:

• babel-plugin-lodash

  • Install lodash and the babel plugin:

  $ npm i --save lodash
  $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
  

  • Add this to your .babelrc

  {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
  }
  

  • Transforms this

  import _ from 'lodash'
  import { add } from 'lodash/fp'
  
  const addOne = add(1)
  _.map([1, 2, 3], addOne)
  

  Roughly to this:

  import _add from 'lodash/fp/add'
  import _map from 'lodash/map'
  
  const addOne = _add(1)
  _map([1, 2, 3], addOne)
  

• lodash-webpack-plugin

  • Install lodash and webpack plugin:

  $ npm i --save lodash
  $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
  

  • Configure your webpack.config.js:

  var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  var webpack = require('webpack');
  
  module.exports = {
    'module': {
      'rules': [{
        'use': 'babel-loader',
        'test': /\.js$/,
        'exclude': /node_modules/,
        'options': {
          'plugins': ['lodash'],
          'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
        }
      }]
    },
    'plugins': [
      new LodashModuleReplacementPlugin,
      new webpack.optimize.UglifyJsPlugin
    ]
  };
  

• lodash-es using the lodash cli

  • $ lodash modularize exports=es -o ./

Answer 3

this actually worked for me

import { isEqual } from 'lodash';

Answer 4

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,
    ...
  }
}

Answer 5

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)

Answer 6

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.