Angular에서 lodash를 가져오고 사용하는 올바른 방법

Angular에서 lodash를 가져오고 사용하는 올바른 방법

저는 Angular에서 다음과 같이 보이는 import statement에 의해 lodash 메서드를 사용할 수 있었습니다.

import {debounce as _debounce} from 'lodash';

이제 해당 문을 사용할 때 다음 오류가 발생합니다.

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

오류 없이 컴파일할 수 있는 유일한 것은 다음 문장입니다.

import * as _ from 'lodash'; 

내 코드에서, 나는 바꿉니다._debounce()로._.debounce(). 그것이 그것을 할 수 있는 유일한 (그리고/또는 올바른 방법입니까?디바운스만 수입할 수 있는 방법이 있나요, 아니면 "나무 흔들기" 때문에 상관없나요?저는 제 자신의 디바운스 함수를 쓸 수 있다는 것을 깨달았지만, 이를 위한 "올바른" 방법에 주로 관심이 있습니다.

p.s. 제가 시도해 본 다른 변형들(각각 오류와 관련된 일종의 오류가 있음):

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

참고로... 다음 버전을 사용하고 있습니다.

각도: 2.4.5

타이프스크립트: 2.1.5

각도-cli: 1.0.0-베타.26

(나무 흔들기에 신경쓰신다면 업데이트 참조)
당신이 이미 한 프로젝트에 로대시를 끌어들이기 위해서라고 생각합니다.

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

필요한 기능만 가져오려면 다음 작업을 수행해야 합니다.

import * as debounce from 'lodash/debounce'

아니면

import { debounce } from "lodash";

다음과 같이 사용:

debounce()

BTW: 타이프스크립트 버전을 다음으로 다운그레이드해야 할 수도 있습니다.2.0.10각 2.x를 사용하는 것처럼.

npm install typescript@2.0.10 --save-dev

업데이트:

최근에 저는 lodash 패키지가 트리 쉐이킹이 되지 않는다는 것을 알게 되었습니다. 그래서 트리 쉐이킹이 필요하다면 대신 lodash-es를 사용하세요.

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

import debounce from 'lodash-es/debounce'

lodash 또는 임의의 자바스크립트 라이브러리를 각도로 가져오기:

단계-1: 라이브러리(lodash)를 설치합니다.

npm i --save lodash

단계-2: 구성품 내부로 가져와 사용합니다.

다음과 같이 가져옵니다.

import 'lodash';

declare var _:any;

아니면

import * as _ from 'lodash';

Step-3: Lo-Dash에 대한 설치 유형 정의(옵션)

npm install --save-dev @types/lodash

아직도 의문이 있다면 예를 들어 보세요.

import { Component, OnInit } from '@angular/core';

import * as _ from 'lodash';

// import 'lodash';

// declare var _:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-lodash';

  ngOnInit() {
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); //lodash function
    console.log(_.random(1, 100)); //lodash function
  }

}

lodash의 특정 패키지 가져오기(lodash.includes)

단계-1: 특정 패키지를 설치합니다(lodash.includes) 및 유형 정의 패키지도 제공합니다.

npm i lodash.includes

npm i -D @types/lodash.includes

step-2: 아래와 같이 원하는 곳에 사용하시면 됩니다.

import { Component, OnInit } from '@angular/core';

import { includes } from 'lodash';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-lodash-includes';

  ngOnInit() {
    console.log((includes['a', 'b', 'c', 'd'], 'b')); //lodash'includes package' usage
  }

}

쿤체비치가 "업데이트"하고 로이가 편집한 것처럼 이것은 나에게 해결해 주었습니다.

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

import { debounce as _debounce } from 'lodash';

저는 es-modules를 가져와야 했고, 그렇지 않으면 제 구성(tsconfig.json) 때문에 컴파일 오류가 발생했습니다.

저도 같은 문제가 있었는데 "@types/lodash"를 버전 "4.14.50"으로 변경한 후부터 작동하기 시작했습니다.

언급URL : https://stackoverflow.com/questions/41991178/correct-way-of-importing-and-using-lodash-in-angular