javascript – How to Import a Single Lodash Function? – Code Utility

Using webpack, I’m making an attempt to import isEqual since lodash appears to be importing all the things. I’ve tried doing the next with no success:

import { isEqual } from 'lodash'

import isEqual from 'lodash/lang'

import isEqual from 'lodash/lang/isEqual'

import { isEqual } from 'lodash/lang'

import { isEqual } from 'lodash/lang'

You can set up lodash.isequal as a single module with out putting in the entire lodash bundle like so:

npm set up --save lodash.isequal

When utilizing ECMAScript 5 and CommonJS modules, you then import it like this:

var isEqual = require('lodash.isequal');

Using ES6 modules, this may be:

import isEqual from 'lodash.isequal';

And you need to 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 need to use the isEqual perform in your code. Note that it’s not a a part of an object named _ for those who import it this fashion, so that you
don’t reference it with _.isEqual, however instantly with isEqual.

Alternative: Using lodash-es

As identified by @kimamula:

With webpack 4 and lodash-es 4.17.7 and better, this code works.

import { isEqual } from 'lodash-es';

This is as a result of webpack 4 helps the sideEffects flag and lodash-es 4.17.7 and better contains the flag (which is ready to false).

Why Not Use the Version With the Slash?
Other solutions to this query counsel you can additionally use a sprint as a substitute of a dot, like so:

import isEqual from 'lodash/isequal';

This works, too, however there are two minor drawbacks:

• You have to set up the entire lodash bundle (npm set up --save lodash), not simply the small separate lodash.isequal bundle; cupboard space is reasonable and CPUs are quick, so you might not care about this
• The ensuing bundle when utilizing instruments like webpack will likely be barely larger; I came upon that bundle sizes with a minimal code instance of isEqual are on common 28% larger (tried webpack 2 and webpack 3, with or with out Babel, with or with out Uglify)

If you simply need to embody isEqual and never the remainder of the lodash features (helpful for preserving your bundle measurement small), you are able to do this in ES6;

import isEqual from 'lodash/isEqual'

This is just about the identical as what’s described in the lodash README, besides that there they use require() syntax.

var at = require('lodash/at');

With webpack 4 and lodash-es 4.17.7 and better, this code works.

import { isEqual } from 'lodash-es';

This is as a result of webpack 4 helps sideEffects flag and lodash-es 4.17.7 and better contains the flag (which is ready to false).

Edit

As of version 1.9.0, Parcel also supports "sideEffects": false, threrefore import { isEqual } from 'lodash-es'; can be tree shakable with Parcel.

Not associated to webpack however I’ll add it right here as a lot of individuals are at the moment transferring to typescript.

You can even import a single perform from lodash utilizing import isEqual from 'lodash/isEqual'; in typescript with the esModuleInterop flag within the compiler choices (tsconfig.json)

instance

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": "es6", "dom",
    "moduleResolution": "node",
    "esModuleInterop": true,
    ...
  }
}

I feel it’s price noting lodash documentation on per method packages to reply this query at the least as of June 2020:

Lodash strategies can be found in standalone per technique packages like lodash.mapvalues, lodash.pickby, and so forth. These packages comprise solely the code the tactic will depend on.

However, use of those packages is discouraged and they are going to be eliminated in v5.

Although they might appear extra light-weight, they may normally enhance the dimensions of node_modules and webpack/rollup bundles in a venture that transitively will depend on a number of per technique packages and/or the principle lodash bundle. Whereas many strategies in the principle lodash bundle share code, the per technique packages internally bundle copies of any code they rely on.

The docs truly advocate:

Don’t fear—for those who import or require strategies instantly, e.g. const throttle = require('lodash/throttle'), solely the subset of lodash code your bundle makes use of will likely be bundled in tasks that use your bundle.

Additionally this web page has some fairly fascinating analysis into completely different import choices and ensuing construct sizes: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark

Best manner is with the slash:

import isEqual from 'lodash/isEqual'  //or equal

Maybe dotted per perform packages had been the suitable reply as soon as, however their use is now discouraged and they are going to be removed.

Also, as said by Lukas, it’s higher than
import {isEqual} from 'lodash', as this may import all lib and then extract one perform to the present scope.

Lodash lists a couple of choices of 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 } }
  }
  

  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': {
      'guidelines': {
        'use': 'babel-loader',
        'take a look at': /.js$/,
        'exclude': /node_modules/,
        'choices': {
          'plugins': 'lodash',
          'presets': 'env', { 'modules': false, 'targets': { 'node': 4 } }
        }
      }
    },
    'plugins': 
      new LodashModuleReplacementPlugin,
      new webpack.optimize.UglifyJsPlugin
    
  };
  

• lodash-es utilizing the lodash cli

  • $ lodash modularize exports=es -o ./

import { isEqual } from 'lodash-es'; is importing your complete library. I’m utilizing Rollup which ought to do tree shaking by default.

Whenever I’ve written my very own modules, this named import syntax works and Rollup efficiently tree shakes, so I’m a bit confused as to why it gained’t work with Lodash.

If you’re utilizing a REPL on the browser (chrome dev instruments or Deno for instance), and you actually simply want to rapidly take a look at one thing with out utilizing any IDE, babel or instrument, you may import a single or extra lodash features from nearly any web site until they’re CORS restricted, within the following manner:

(arr => Promise.all(arr.map(_ =>
  import ('https://cdn.skypack.dev/lodash.' + _))).then(_ => _0.default(arr, _.map(d => d.default))))(
  "zip", "unzip", "groupby", "mapvalues")
  .then(_ => Object.fromEntries(_)).then(_ => {
  //you need to use _ with zip, unzip, groupby, and mapvalues
  console.log(Object.keys(_))
})

this truly labored for me

import { isEqual } from 'lodash';