Lodash in die angle2 + TypeScript-Anwendung importieren

Update 26. September 2016:

Wie @ Taytay's Antwort sagt, können wir anstelle der "Typings" -Installationen, die wir vor einigen Monaten verwendet haben, jetzt Folgendes verwenden:

npm install --save @types/lodash

Hier einige zusätzliche Hinweise, die diese Antwort unterstützen:

• https://www.npmjs.com/package/@types/lodash
• TypScript-Typisierungen in NPM @types org-Paketen

Wenn Sie noch die Typing-Installation verwenden, lesen Sie die Kommentare ("Andere") zu '' '--ambient' '' und '' '--global' ''.

Im neuen Schnellstart befindet sich config nicht mehr in index.html. Es ist jetzt in systemjs.config.ts (wenn SystemJS verwendet wird).

Ursprüngliche Antwort:

Dies funktionierte auf meinem Mac (nach der Installation von Angular 2 gemäß Quick Start ):

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

Sie finden verschiedene Dateien, z.

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

Angular 2 Quickstart verwendet System.js, daher fügte ich der Konfiguration in index.html wie folgt "map" hinzu:

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

Dann konnte ich in meinem .ts-Code Folgendes tun:

import _ from 'lodash';

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

Änderungen ab Mitte 2016: 

Wie @tibbus erwähnt, benötigen Sie in einigen Zusammenhängen:

import * as _ from 'lodash';

Wenn Sie mit angle2-seed beginnen und nicht jedes Mal importieren möchten, können Sie die Map- und Importschritte überspringen und die lodash-Zeile in tools/config/project.config.ts einfach kommentieren.

Um meine Tests mit lodash arbeiten zu lassen, musste ich dem Datei-Array in karma.conf.js eine Zeile hinzufügen:

'node_modules/lodash/lodash.js',

Schritt 1: Ändern Sie die package.json-Datei, um lodash in die Abhängigkeiten aufzunehmen.

  "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"  }

Schritt 2: Ich verwende den SystemJs-Modul-Loader in meiner angle2-Anwendung. Ich würde also die Datei systemjs.config.js ändern, um lodash abzubilden.

(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);

Schritt 3: Jetzt npm installieren

Schritt 4: Verwenden Sie lodash in Ihrer Datei. 

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

Das wichtigste zuerst

npm install --save lodash

npm install -D @types/lodash

Laden Sie die vollständige lodash-Bibliothek

//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)

ODER laden nur Funktionen, mit denen wir arbeiten werden

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

UPDATE - March 2017

Zur Zeit arbeite ich mit ES6 modules und kürzlich konnte ich mit lodash arbeiten:

// 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)
...

ODER import spezifisch lodash functionality:

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

NOTE - Der Unterschied ist * as in der syntax.__ nicht erforderlich.

Verweise:

Viel Glück.

Seit TypeScript 2.0 werden @types npm-Module zum Importieren von Typisierungen verwendet.

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

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

Jetzt, da diese Frage beantwortet wurde, gehe ich darauf ein, wie man lodash effizient importiert

Die fehlersichere Methode zum Importieren der gesamten Bibliothek (in main.ts)

import 'lodash';

Das ist das Neue hier:

Ein leichteres lodash mit den benötigten Funktionen implementieren

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

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

PS: Der obige Artikel ist eine interessante Lektüre über die Verbesserung der Erstellungszeit und die Reduzierung der App-Größe

Ich habe lodash erfolgreich mit folgenden Befehlen in mein Projekt importiert:

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

Dann habe ich es auf folgende Weise importiert:

import * as _ from 'lodash';

und in systemjs.config.js habe ich das definiert:

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

Eine weitere elegante Lösung ist, nur das zu bekommen, was Sie brauchen, und nicht alle Lodashs zu importieren

import {forEach,merge} from "lodash";

und dann verwenden Sie es in Ihrem Code

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

Ich hatte genau das gleiche Problem, aber in einer Angular2-App, und dieser Artikel löst es einfach: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

Zusammenfassung des Artikels:

1. Installation der Bibliothek npm install lodash --save
2. TypeScript-Definitionen für Lodash hinzufügen tsd install underscore
3. Einschließlich Skript <script src="node_modules/lodash/index.js"></script>
4. SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js' konfigurieren
5. Modul import * as _ from ‘lodash’; importieren

Ich hoffe, es kann auch für Ihren Fall nützlich sein

Wenn jemand anderes auf dieses Problem stößt und keine der oben genannten Lösungen aufgrund von Problemen mit "doppelter Kennung" funktioniert, führen Sie folgende Schritte aus:

npm install typings --global

Mit älteren Versionen der Typisierung wird alles durcheinander gebracht, und Sie erhalten eine Reihe von Problemen mit "doppelten Bezeichnern". Soweit ich das beurteilen konnte, müssen Sie --ambient nicht mehr verwenden.

Sobald die Typisierung auf dem neuesten Stand ist, sollte dies funktionieren (mit dem Angular 2-Schnellstart).

Lauf:

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

Fügen Sie dies zunächst zu systemjs.config.js hinzu:

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

Jetzt können Sie dies in jeder Datei verwenden: import * as _ from 'lodash';

Löschen Sie Ihren Typisierungsordner und führen Sie npm install aus, wenn Sie immer noch Probleme haben.

Bitte beachten Sie, dass npm install --save die Abhängigkeit fördert, die Ihre App im Produktionscode benötigt.
Was "Typisierungen" angeht, ist dies nur für TypeScript erforderlich, das schließlich in JavaScript umgesetzt wird. Daher möchten Sie sie wahrscheinlich nicht im Produktionscode haben. Ich empfehle, es in die Variable devDependencies Ihres Projekts zu legen, stattdessen mit

npm install --save-dev @types/lodash

oder 

npm install -D @types/lodash

(siehe zum Beispiel Akash post). Übrigens ist es so, wie es in ng2 tuto gemacht wird.

Alternativ dazu könnte Ihr package.json folgendermaßen aussehen:

{
    "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"
    }
}

Nur ein Hinweis

Das Schöne an npm ist, dass Sie einfach einen npm install --save oder --save-dev starten können, wenn Sie sich nicht sicher sind, welche Version der Abhängigkeit Sie aktuell suchen, und diese wird automatisch in Ihrem package.json für die weitere Verwendung festgelegt.

Teilimport aus lodash sollte in angle 4.1.x mit folgender Schreibweise funktionieren:

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

Oder benutze 'lodash-es' und importiere in Modul:

import { assign } from 'lodash-es';

Ich hatte auch Typen für lodash-es erstellt, so dass Sie nun Folgendes tun können

installieren

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

verwendungszweck

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

wenn Sie Rollup verwenden, schlage ich vor, dies anstelle von lodash zu verwenden.

wenn nicht danach arbeiten 

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

versuchen Sie es und importieren Sie lodash

typings install lodash --save

1. Installieren Sie lodash

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

2. Fügen Sie in index.html eine Karte für lodash hinzu:

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

3. Im .ts-Code import lodash-Modul

import _ from 'lodash';

Installation über npm.

$ npm install lodash --save

Nun import in der Datei:

$ import * as _ from 'lodash';

ENV:

Winkel-CLI: 1.6.6
Knoten: 6.11.2
OS: Darwin x64
Winkel: 5.2.2
TypScript: 2.4.2
Webpack: 3.10.0

Ich verwende ng2 mit Webpack, nicht System JS. Schritte für mich waren:

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

und dann in der Datei, in die ich Unterstrich importieren möchte:

import * as _ from 'underscore';

Das Verwalten von Typen mit den Befehlen typings und tsd wird letztendlich zugunsten von npm über npm install @types/lodash abgelehnt.

Ich hatte jedoch lange Zeit Probleme mit "Kann das Modul lodash nicht finden" in der Import-Anweisung:

import * as _ from 'lodash';

Letztendlich wurde mir klar, dass TypeScript nur Typen von node_modules/@ types Startversion 2 lädt, und mein VsCode Language-Dienst verwendete immer noch 1.8, sodass der Editor Fehler meldete. 

Wenn Sie VSCode verwenden, sollten Sie dies einschließen 

"TypeScript.tsdk":  "node_modules/TypeScript/lib"

in Ihrer VSCode-Datei settings.json (für Arbeitsbereichseinstellungen) und vergewissern Sie sich, dass die TypeScript-Version> = 2.0.0 über npm install [email protected] --save-dev installiert ist.

Danach beschwerte sich mein Redakteur nicht über die Importaussage.

Ich bin auf Angular 4.0.0 mit dem preboot/angle-webpack unterwegs und musste einen etwas anderen Weg gehen.

Die von @Taytay bereitgestellte Lösung hat für mich meistens funktioniert:

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

und Importieren der Funktionen in eine bestimmte .component.ts -Datei mit:

import * as _ from "lodash";

Dies funktioniert, weil es keine "Standard" exportierte Klasse gibt. Bei mir bestand der Unterschied darin, dass ich den Weg finden musste, der in Bibliotheken von Drittanbietern geladen werden konnte: vendor.ts. 

src/vendor.ts

Meine vendor.ts Datei sieht jetzt so aus:

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, ...

Installieren Sie alle Durchgangsanschlüsse:

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

Fügen Sie Pfade in index.html hinzu

<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>

Importieren Sie lodash oben in der .ts-Datei

import * as _ from 'lodash'

Vielleicht ist es zu seltsam, aber keiner der oben genannten Punkte hat mir zuallererst geholfen, weil ich die lodash ordnungsgemäß installiert hatte (auch über obige Vorschläge neu installiert).

Um es kurz zu machen, war das Problem mit der Verwendung der _.has-Methode aus lodash verbunden.

Ich habe es behoben, indem ich einfach den JS in Operator verwendet habe.