Правильный способ импорта и использования lodash в Angular

Я использовал метод lodash в Angular с помощью оператора импорта, который выглядел следующим образом:

import {debounce as _debounce} from 'lodash';

Теперь я получаю следующую ошибку при использовании этого оператора:

'"{...}/node_modules/@types/lodash/index"' has no exported member 'debounce'.

Единственное, что будет компилироваться без ошибок, это утверждение:

import * as _ from 'lodash';

В моем коде я меняю _debounce() на _.debounce(). Это единственный (и/или правильный) способ сделать это? Есть ли способ импортировать debounce, или это не имеет значения из-за "treeshaking"? Я понимаю, что могу написать свою собственную функцию дебюта, но меня в основном интересует "правильный" способ сделать это.

p.s. Другие варианты, которые я пробовал (каждая из них связана с какой-то ошибкой):

import {debounce as _debounce } from 'lodash/debounce';
import * as _debounce from 'lodash/debounce';
import debounce = require('lodash/debounce');

FYI... Я использую следующие версии:

Angular: 2.4.5

Typescript: 2.1.5

Angular -cli: 1.0.0-beta.26

Ответы

Ответ 1

(если вы беспокоитесь о дрожании дерева, см. обновление)
Я полагаю, чтобы вы ввели lodash в свой проект, который вы уже сделали.

npm install lodash --save
npm install @types/lodash --save-dev

Если вы хотите импортировать только необходимые функции, вы должны сделать:

import * as debounce from 'lodash/debounce'

или

import { debounce } from "lodash";

Используйте его как:

debounce()

BTW: Возможно, вам придется отказаться от версии typescript до 2.0.10, поскольку вы используете angular 2.x.

npm install [email protected] --save-dev

UPDATE:

Недавно я понял, что lodash пакет просто не трясет дерево, поэтому, если вам нужно три встряхивания, просто используйте lodash-es.

npm install lodash-es --save
npm install @types/lodash-es --save-dev

import debounce from 'lodash-es/debounce'

Ответ 2

Это решило это для меня, как написано в "обновлено" Кунцевичем и отредактировано Роем

yarn add lodash-es
yarn add @types/lodash-es --dev

import { debounce as _debounce } from 'lodash';

Мне пришлось импортировать es-модули, иначе мне выдали ошибки компиляции - скорее всего, из-за моей конфигурации (tsconfig.json).

Ответ 3

У меня была такая же проблема, и она начала работать после того, как я изменил "@types/lodash" на версию "4.14.50".

Ответ 4

Я пробовал разные подходы, чтобы уменьшить размер lodash в связке, и хотя обновленный ответ Kuncevič работает, мой связка все еще включает в себя не-es lodash (я полагаю, потому что это требуется какой-то другой зависимостью), поэтому на данный момент я не думаю, что это имеет смысл добавление lodash-ов вообще или импорт функций отдельно от lodash. Насколько я понимаю, npm выполняет дедупликацию и перемещает lodash в папку верхнего уровня (node_modules), поэтому он существует даже после того, как я удалил его из package.json и переустановил node_modules. Webpack не заботится о package.json, и если он видит, что lodash кем-то импортирован - связывает его.