babel-plugin-lodash

What is babel-plugin-lodash?

babel-plugin-lodash is a Babel plugin that cherry-picks Lodash modules so you only include the parts of Lodash you use, reducing bundle size and improving performance.

What are babel-plugin-lodash's main functionalities?

Cherry-picking Lodash modules

This feature allows you to import only the Lodash functions you need, rather than the entire library. This reduces the size of your JavaScript bundle.

import { map, filter } from 'lodash';

Automatic cherry-picking

Even if you import the entire Lodash library, babel-plugin-lodash will automatically transform your code to only include the specific functions you use.

import _ from 'lodash';
const result = _.map([1, 2, 3], n => n * 2);

Other packages similar to babel-plugin-lodash

lodash-es

lodash-es is a version of Lodash that is designed to work with ES modules. It allows for tree-shaking, which can help reduce bundle size. Unlike babel-plugin-lodash, lodash-es requires you to change your import statements to use ES module syntax.

lodash-webpack-plugin

lodash-webpack-plugin is a plugin for Webpack that also helps reduce the size of Lodash in your bundle. It works by stripping out unused features of Lodash, but it requires a Webpack-specific setup, unlike babel-plugin-lodash which works directly with Babel.

README

babel-plugin-lodash

A simple transform to cherry-pick Lodash modules so you don’t have to.

Combine with lodash-webpack-plugin for even smaller cherry-picked builds!

Install

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

Example

Transforms

import _ from 'lodash'
import { add } from 'lodash/fp'

const addOne = add(1)
_.map([1, 2, 3], addOne)

roughly to

import _add from 'lodash/fp/add'
import _map from 'lodash/map'

const addOne = _add(1)
_map([1, 2, 3], addOne)

Usage

.babelrc

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

Set plugin options using an array of [pluginName, optionsObject].

{
  "plugins": [["lodash", { "id": "lodash-compat", "cwd": "some/path" }]],
  "presets": [["@babel/env", { "targets": { "node": 6 } }]]
}

The options.id can be an array of ids.

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

Babel CLI

$ babel --plugins lodash --presets @babel/es2015 script.js

Babel API

require('babel-core').transform('code', {
  'plugins': ['lodash'],
  'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
})

webpack.config.js

'module': {
  'loaders': [{
    'loader': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['lodash'],
      'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
    }
  }]
}

FAQ

Can this plugin produce ES2015 imports rather than CommonJS imports?

This plugin produces ES2015 imports by default. The @babel/plugin-transform-modules-commonjs plugin, which is included in the @babel/preset-es2015 preset, transforms ES2015 import statements to CommonJS. Omit it from your preset to preserve ES2015 style imports.

Limitations

• You must use ES2015 imports to load Lodash
• Babel < 6 & Node.js < 4 aren’t supported
• Chain sequences aren’t supported. See this blog post for alternatives.
• Modularized method packages aren’t supported