Каков правильный импорт для конструктора lodash? - PullRequest
Новая
       13

Каков правильный импорт для конструктора lodash?

1 голос
/ 31 мая 2019

Я работаю над некоторыми проектами Angular и использую lodash в качестве помощника.Я прочитал много статей о том, как правильно импортировать lodash, чтобы уменьшить размер пакета.Но у меня возникла проблема с моей текущей реализацией, потому что я использую метод цепочки lodash.

return _(items)
  .groupBy(x => x.vote.code)
  .map(items => items)
  .value();

import * as _ from 'lodash';

Я прочитал импорт * не хорошо.Моя проблема в том, как я могу импортировать _(items), чтобы мой импорт выглядел так, как показано ниже? 

import groupBy from 'lodash/groupBy';

Ответы [ 2 ]

2 голосов
/ 31 мая 2019

Если вы хотите уменьшить размер своего пакета, вы должны избегать импорта всего Lodash. Вместо этого вы можете просто импортировать нужные функции - groupBy и map.

Однако в этом случае вы также используете цепочку, для которой требует весь Lodash. Вы можете переписать свой код, используя flow и использовать функционально-дружественный для программирования пакет Lodash для замены цепочки: 

import {flow, groupBy, map} from 'lodash/fp';

/* ... */

const chainReplacement = flow(groupBy(x => x.vote.code), map(items => items));
return chainReplacement(items)

Вот краткая иллюстрация того, что эти два дают эквивалентные результаты: 

const {flow, groupBy, map} = _;

//sample data
const items = [
  { vote: { code: "1" }, name: "Alice"},
  { vote: { code: "2" }, name: "Bob"},
  { vote: { code: "1" }, name: "Carol"},
  { vote: { code: "2" }, name: "Dave"},
  { vote: { code: "1" }, name: "Edel"}
];

//using literally the same functions
const groupByCallback = x => x.vote.code;
const mapCallback = items => items.length;

const chain = _(items)
  .groupBy(groupByCallback)
  .map(mapCallback);

const chainReplacement = flow(
  groupBy(groupByCallback), 
  map(mapCallback)
);

console.log("chain", chain.value())
console.log("chainReplacement", chainReplacement(items))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js"></script>

Я сделал некоторые данные, которые соответствовали вашему использованию groupBy, но затем пришлось изменить обратный вызов map, потому что это не имело смысла. Я предполагаю, потому что это было в иллюстративных целях. Поэтому я поменял его на items => items.length, чтобы узнать количество каждой группы. Это не очень многозначительно, но также только для иллюстративных целей.

1 голос
/ 31 мая 2019

Если вы хотите импортировать только одну функцию или группу функций: 

import { groupBy } from "lodash";
...