Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lodash/babel-plugin-lodash
Modular Lodash builds without the hassle.
https://github.com/lodash/babel-plugin-lodash
babel lodash
Last synced: about 15 hours ago
JSON representation
Modular Lodash builds without the hassle.
- Host: GitHub
- URL: https://github.com/lodash/babel-plugin-lodash
- Owner: lodash
- License: other
- Archived: true
- Created: 2015-07-30T17:56:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-06-22T20:08:56.000Z (over 1 year ago)
- Last Synced: 2025-01-09T06:21:35.499Z (13 days ago)
- Topics: babel, lodash
- Language: JavaScript
- Homepage:
- Size: 597 KB
- Stars: 1,954
- Watchers: 20
- Forks: 98
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-babel - lodash - Cherry-picks Lodash modules so you don’t have to. (Plugins / Module Resolution)
README
# babel-plugin-lodash
A simple transform to cherry-pick Lodash modules so you don’t have to.
Combine with [lodash-webpack-plugin](https://www.npmjs.com/package/lodash-webpack-plugin)
for even smaller cherry-picked builds!
## Install
```shell
$ npm i --save lodash
$ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
```
## Example
Transforms
```js
import _ from 'lodash'
import { add } from 'lodash/fp'
const addOne = add(1)
_.map([1, 2, 3], addOne)
```
roughly to
```js
import _add from 'lodash/fp/add'
import _map from 'lodash/map'
const addOne = _add(1)
_map([1, 2, 3], addOne)
```
## Usage
###### .babelrc
```json
{
"plugins": ["lodash"],
"presets": [["@babel/env", { "targets": { "node": 6 } }]]
}
```
Set plugin options using an array of `[pluginName, optionsObject]`.
```json
{
"plugins": [["lodash", { "id": "lodash-compat", "cwd": "some/path" }]],
"presets": [["@babel/env", { "targets": { "node": 6 } }]]
}
```
The `options.id` can be an array of ids.
```json
{
"plugins": [["lodash", { "id": ["async", "lodash-bound"] }]],
"presets": [["@babel/env", { "targets": { "node": 6 } }]]
}
```
###### Babel CLI
```sh
$ babel --plugins lodash --presets @babel/es2015 script.js
```
###### Babel API
```js
require('babel-core').transform('code', {
'plugins': ['lodash'],
'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
})
```
###### webpack.config.js
```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`](https://www.npmjs.com/package/@babel/plugin-transform-modules-commonjs)
plugin, which is included in the [`@babel/preset-es2015`](https://www.npmjs.com/package/@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](https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba) for alternatives.
* Modularized [method packages](https://www.npmjs.com/browse/keyword/lodash-modularized) aren’t supported