Lodash - Environment Setup

Lodash - Environment Setup

To start using Lodash in your project, you need to include the library. There are several ways to do this, depending on your development environment (browser, Node.js, modern JavaScript project with bundlers).

Method 1: Using Lodash in the Browser (Modern Approach)

Option A: ES Module CDN

For modern browsers supporting ES Modules, you can directly import Lodash from a CDN within a <script type="module"> tag. This is often suitable for small projects, demos, or online code editors.

<!DOCTYPE html>
<html>
<head>
  <title>Lodash ES Module Example</title>
</head>
<body>
  <h1>Check the console!</h1>

  <script type="module">
    import _ from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';

    const numbers = [1, 2, 3, 4];
    const doubled = _.map(numbers, n => n * 2);

    console.log('Original:', numbers);
    console.log('Doubled:', doubled);
    console.log('First element:', _.first(numbers));
  </script>
</body>
</html>

Note: Using lodash-es provides the ES Module version of Lodash, which works well with modern import syntax.

Option B: Classic CDN Script Tag (Legacy)

Alternatively, you can include the UMD (Universal Module Definition) build via a standard <script> tag. This makes Lodash available as a global variable (usually _). This method is common in older projects or environments without module support.

<!DOCTYPE html>
<html>
<head>
  <title>Lodash Classic CDN Example</title>
  <!-- Include Lodash library -->
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
  <div id="output"></div>

  <script>
    // Lodash is available as the global variable _
    const numbers = [1, 2, 3, 4];
    const sum = _.sum(numbers);

    document.getElementById('output').innerText = `The sum is: ${sum}`;
    console.log('Sum calculated using global _:', sum);
  </script>
</body>
</html>

Method 2: Using Lodash with Node.js or Bundlers (Recommended for Projects)

For server-side development with Node.js or front-end projects using module bundlers (like Webpack, Vite, Rollup, Parcel), the standard approach is to install Lodash via a package manager (npm or yarn).

Step 1: Installation

Open your project’s terminal and run:

# Using npm
npm install lodash

# Or using yarn
yarn add lodash

This downloads Lodash and adds it to your project’s dependencies (in package.json and node_modules).

For potentially better tree-shaking (removing unused code) with modern bundlers, consider installing the specific ES module version:

# Using npm
npm install lodash-es

# Or using yarn
yarn add lodash-es

Step 2: Importing Lodash

In your JavaScript files, import Lodash using either CommonJS (require) or ES Module (import) syntax:

ES Module Syntax (Recommended)

// Import the entire library (if using 'lodash' package)
import _ from 'lodash';

// Or import the entire library (if using 'lodash-es' package)
import _ from 'lodash-es';

// You can also import specific methods for better tree-shaking
// (Works well with 'lodash-es' or if your bundler supports it for 'lodash')
import map from 'lodash-es/map';
import chunk from 'lodash-es/chunk';
// or
// import { map, chunk } from 'lodash-es';

const data = [1, 2, 3, 4, 5];
const chunks = chunk(data, 2);
const squares = map(data, n => n * n);

console.log('Chunks:', chunks);
console.log('Squares:', squares);

CommonJS Syntax (Node.js Default)

const _ = require('lodash');

const numbers = [1, 2, 3, 4];
const listOfNumbers = _.join(numbers, ', ');

console.log(listOfNumbers); // Output: 1, 2, 3, 4

Running Node.js Example

Save the CommonJS example above as tester.js. Then run it from your terminal:

node tester.js

Output:

1, 2, 3, 4

Choosing the right setup method depends on your project’s needs and toolchain. Using npm/yarn is standard for most modern development workflows.