lodash를 angular2 + typescript 어플리케이션으로 Import하는 중

lodash를 angular2 + typescript 어플리케이션으로 Import하는 중

lodash 모듈을 수입하는 데 어려움을 겪고 있습니다.npm+gulp을 사용하여 프로젝트를 셋업하여 계속 같은 벽에 부딪힙니다.일반 로다시도 해봤지만 로다시도 해봤어요.

lodash npm 패키지: (패키지 루트 폴더에 index.js 파일이 있습니다)

import * as _ from 'lodash';    

결과:

error TS2307: Cannot find module 'lodash'.

lodash-es npm 패키지: (패키지 루트 폴더 lodash.js에 기본 내보내기가 있음)

import * as _ from 'lodash-es/lodash';

결과:

error TS2307: Cannot find module 'lodash-es'.   

gulp 태스크와 webstorm 모두 동일한 문제를 보고합니다.

재미있는 사실은, 이것은 에러를 반환하지 않습니다.

import 'lodash-es/lodash';

...하지만 물론 '_'는 없다...

tsconfig.json 파일:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

내 gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';

gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');
    
    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

올바르게 이해한 경우 tsconfig의 module Resolution:'node'는 lodash 및 lodash-es가 설치되어 있는 node_modules 폴더로 Import 문을 가리킵니다.Import 방법에는 절대 경로, 상대 경로 등 여러 가지가 있습니다만, 아무것도 효과가 없는 것 같습니다.좋은 생각 있어요?

필요하다면 문제를 설명하기 위해 작은 zip 파일을 제공할 수 있습니다.

Typescript 2.0: (tsd 및 타이핑은 다음 사항을 고려하여 권장되지 않습니다)에서 이 작업을 수행하는 방법은 다음과 같습니다.

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save-dev @types/lodash

그런 다음 .ts 파일에서 다음을 수행합니다.

다음 중 하나:

import * as _ from "lodash";

또는 (@Naitik의 제안대로)

import _ from "lodash";

뭐가 다른지 확신이 안 서요.첫 번째 구문을 사용하고 선호합니다.그러나 일부에서는 첫 번째 구문이 작동하지 않는다고 보고하고 있습니다.또한 후자의 구문은 느리게 로드된 웹 팩모듈과 호환되지 않는다고 지적하고 있습니다.YMMV

2017년 2월 27일 편집:

★★@Koert★★★★★★★★★★★★★★★★★★★★★★★★★★import * as _ from "lodash";2. 4.17.14입니다.그는 다른 제안된 Import 구문이 "기본 내보내기가 없습니다"라는 오류를 발생시킨다고 말합니다.

2016년 9월 26일 갱신:

@Taytay의 답변에서 알 수 있듯이 몇 달 전에 사용하던 '타이핑' 설치 대신 다음 기능을 사용할 수 있습니다.

npm install --save @types/lodash

다음은 그 답변을 뒷받침하는 몇 가지 추가 참고 자료입니다.

• https://www.npmjs.com/package/ @types / lodash
• NPM @types org 패키지의 TypeScript 입력

타이핑 인스톨을 계속 사용하고 있는 경우는, 다음의 코멘트를 참조해 주세요.「-- ambient 」및 「-- global 」에 관한 코멘트를 참조해 주세요.

또한 새로운 Quick Start에서는 Configuration은 index.html에 없고 Systemjs.config.ts에 있습니다(System을 사용하는 경우).JS)

원답:

Mac에서 작동했습니다(Quick Start에 따라 Angular 2를 설치한 후):

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

영향을 받는 다양한 파일을 찾을 수 있습니다.

• /typings/main.d.ts
• /typings.json
• /disclosed.json

Angular 2 Quickstart는 System.js를 사용하기 때문에 다음과 같이 index.html의 Configuration에 map을 추가했습니다.

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

그 후, 제 .ts 코드로 다음을 할 수 있었습니다.

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

2016년 중반 이후 편집:

@tibbus에서 언급했듯이 컨텍스트에 따라서는 다음이 필요합니다.

import * as _ from 'lodash';

angular2-seed에서 시작하여 매번 Import하지 않으려면 맵과 Import 단계를 건너뛰고 tools/config/project.ts에서 lodash 행을 주석 해제하면 됩니다.

lodash에서 테스트를 수행하기 위해 karma.conf.js의 파일 배열에 행을 추가해야 했습니다.

'node_modules/lodash/lodash.js',

먼저 해야 할 일

npm install --save lodash

npm install -D @types/lodash

전체 Lodash 라이브러리 로드

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

또는 사용할 기능만 로드합니다.

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)

---

UPDATE - March 2017

는 지금 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ES6 modules그리고 최근에 나는 그 일을 함께 할 수 있었다.lodash다음과 같이 합니다.

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

★★★importlodash functionality:

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

참고 - 차이점은* as.syntax

---

참고 자료:

행운을 빌어요.

순서 1: 패키지를 변경합니다.종속성에 lodash를 포함하는 json 파일.

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

2단계: angular2 애플리케이션에서 SystemJs 모듈 로더를 사용하고 있습니다.따라서 lodash를 매핑하기 위해 systemjs.config.js 파일을 수정합니다.

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

순서 3: npm 설치를 실시합니다.

4단계: 파일에서 lodash를 사용합니다.

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

Typescript 2.0 이후 @types npm 모듈이 입력 Import에 사용됩니다.

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

이제 이 질문에 답했으므로 lodash를 효율적으로 Import하는 방법에 대해 알아보겠습니다.

라이브러리 전체를 fail safe로 Import하는 방법(main.ts)

import 'lodash';

다음은 새로운 부분입니다.

필요한 기능을 갖춘 경량 로더시 구현

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

출처 : https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba #.kg6azugbd

PS: 위 기사는 빌드 시간의 향상과 애플리케이션 사이즈의 삭감에 관한 흥미로운 기사입니다.

다음 명령을 사용하여 프로젝트에서 lodash를 성공적으로 Import했습니다.

npm install lodash --save
typings install lodash --save

그리고 다음 방법으로 Import했습니다.

import * as _ from 'lodash';

systemjs.config.displays에서는 다음과 같이 정의되어 있습니다.

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

저도 똑같은 문제가 있었습니다만, Angular2 앱에서는, 이 기사는 https://medium.com/@s_eschweiler/using-disply-with-disply-2-87e06db8e5d1#.p6gra5를 해결했습니다.

기사의 개요:

1. npm install lodash --save
2. Lodash의 TypeScript 。tsd install underscore
3. 포함<script src="node_modules/lodash/index.js"></script>
4. Configuring (JSystem.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Importimport * as _ from ‘lodash’;

당신의 사례에도 도움이 되길 바랍니다.

또 하나의 우아한 솔루션은 모든 로다시를 Import하지 않고 필요한 것만 취득하는 것입니다.

import {forEach,merge} from "lodash";

코드로 사용합니다.

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})

다른 사용자가 이 문제에 부딪혔을 때 "ID 중복" 문제로 인해 위의 해결 방법이 작동하지 않는 경우 다음을 수행합니다.

npm install typings --global

오래된 버전의 타이핑에서는 문제가 발생하여 "ID 중복" 문제가 많이 발생합니다. 꼭 쓸 --ambient내가 아는 한엔 더 이상 안 돼

따라서 입력이 최신 상태가 되면 (Angular 2 퀵스타트를 사용하여) 동작합니다.

실행:

npm install lodash --save 
typings install lodash --save

먼저 systemjs.config.js에 추가합니다.

'lodash':                     'node_modules/lodash/lodash.js'

어떤할 수 .import * as _ from 'lodash';

하고 실행하세요.npm install아직 문제가 있다면요

해 주세요.npm install --save어플리케이션에서 프로덕션 코드에 필요한 의존성을 육성합니다.
"TypeScript", "JavaScript", "JavaScript"입니다.따라서 당신은 그것들을 생산 코드에 넣고 싶지 않을 것입니다.합니다.devDependencies""를

npm install --save-dev @types/lodash

또는

npm install -D @types/lodash

(예를 들어 Akash 포스트 참조).그나저나 ng2 tuto에서 하는 방식이에요.

또는 패키지 방법을 알려드립니다.json은 다음과 같습니다.

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

단순한 팁

★★★★★의 장점npm '를 하는 할 수 .npm install --save ★★★★★★★★★★★★★★★★★」--save-dev최신 , 이 으로 "Dependency" (의 의존관계는 "Dependency" 로 됩니다.package.json추가 사용을 위해.

lodash로부터의 부분 Import는 다음 표기법을 사용하여 각도 4.1.x로 동작해야 합니다.

let assign = require('lodash/assign');

또는 'lodash-es'를 사용하여 모듈로 Import:

import { assign } from 'lodash-es';

가 '오타타'를요.lodash-es 해서 이제 할 수 요.

설치하다

npm install lodash-es -S
npm install @types/lodash-es -D

사용.

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

한다면 '롤업' '롤업'을 사용하는 것이 .lodash★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

★★★★★★를 합니다.npm.

$ npm install lodash --save

그럼 이제 ㅇㅇㅇㄹㄹㄹㄹ,import★★★★

$ import * as _ from 'lodash';

환경:

CLI: 1.6.6 CLI: 1.6.6
2 슬롯: 6.11.2
OS: darwin x64
.2 °C: 5.2.2
.4 입니다.
팩: 3. ©: 3.10.0

1. lodash 설치

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

2. index.html에 lodash 맵을 추가합니다.

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

3. .ts 코드 Import lodash 모듈

import _ from 'lodash';

시스템 JS가 아닌 웹 팩과 함께 ng2를 사용하고 있습니다.나에게 필요한 단계는 다음과 같습니다.

npm install underscore --save
typings install dt~underscore --global --save

그런 다음 언더스코어를 Import할 파일:

import * as _ from 'underscore';

유형 관리 방법typings그리고.tsd명령어는 최종적으로 npm을 사용하기 위해 권장되지 않습니다.npm install @types/lodash.

그러나 Import 명세서에 "모듈 lodash를 찾을 수 없습니다"라는 문제가 오랫동안 있었습니다.

import * as _ from 'lodash';

최종적으로 Typescript는 node_modules/@types start version 2에서 타입만 로드하고 VsCode Language 서비스는 아직 1.8을 사용하고 있었기 때문에 에디터가 오류를 보고하고 있었습니다.

VSCode를 사용하는 경우 다음을 포함해야 합니다.

"typescript.tsdk":  "node_modules/typescript/lib"

VSCode settings.json 파일(작업영역 설정용)에서 다음을 통해 typescript 버전 >= 2.0.0을 설치했는지 확인합니다.npm install typescript@2.0.2 --save-dev

그 후 제 편집자는 수입 명세서에 대해 불평하지 않았습니다.

나중에 일하지 않으면

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

이것을 시도하고 lodash를 Import합니다.

typings install lodash --save

npm install --save @types/lodash

https://www.npmjs.com/package/ @types / lodash

모든 스루 터미널을 설치합니다.

npm install lodash --save
tsd install lodash --save

index.html에 경로를 추가합니다.

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

.ts 파일의 맨 위에 있는 lodash를 Import합니다.

import * as _ from 'lodash'

Preboot/Angular-webpack을 사용하여 Angular 4.0.0을 사용 중인데 조금 다른 경로를 사용해야 했습니다.

@Taytay가 제공한 솔루션은 대부분 효과가 있었습니다.

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

다음 명령을 사용하여 지정된 .component.ts 파일로 함수를 Import합니다.

import * as _ from "lodash";

이는 "기본" 내보내기 클래스가 없기 때문에 작동합니다.다른 점은 서드파티 라이브러리에서 로드하는 방법을 찾아야 한다는 것입니다.vendor.ts는 다음 위치에 있습니다.

src/vendor.ts

현재 vendor.ts 파일은 다음과 같습니다.

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

너무 이상할 수도 있지만, 우선 lodash를 올바르게 설치했기 때문에 위의 어느 것도 도움이 되지 않았습니다(위의 제안으로 다시 설치했습니다).

간단히 말하면 이 문제는 사용법과 관련이 있습니다._.haslodash로부터의 메서드.

JS를 사용해서 고쳤습니다.in교환입니다.

시도하다 >>tsd install lodash --save

이전 요구 사항에 따라 Import할 수도 있습니다.

const _get: any = require('lodash.get');

우리에게 효과가 있었던 것은 이것뿐입니다.물론 Import 후에 require() 콜이 있는지 확인합니다.

언급URL : https://stackoverflow.com/questions/34660265/importing-lodash-into-angular2-typescript-application