javascript - Uvoz lodash-a u Angular2 + TypeScript aplikaciju

Imam problema s pokušajem uvoza lodash modula. Postavio sam svoj projekt koristeći npm+gulp i stalno nailazim na isti problem. Pokušao sam s običnim lodashom, ali i s lodash-es.

Lodash npm paket: (ima index.js datoteku u korijenskoj mapi paketa)

import * as _ from 'lodash';

Rezultati u:

error TS2307: Cannot find module 'lodash'.

Npm paket lodash-es: (ima zadani izvoz u lodash.js u korijenskoj mapi paketa)

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

Rezultati u:

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

I zadatak gulp i WebStorm prijavljuju isti problem.

Smiješna činjenica, ovo ne vraća grešku:

import 'lodash-es/lodash';

... ali naravno da ne postoji "_" ...

Moj tsconfig.json datoteka:

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

Moj 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']);

Ako sam dobro shvatio, moduleResolution:'node' u mom tsconfig-u trebao bi usmjeriti import izjave prema mapi node_modules, gdje su instalirani lodash i lodash-es. Također sam pokušao na mnogo različitih načina uvoza: apsolutne putanje, relativne putanje, ali ništa ne izgleda da radi. Imate li kakve ideje?

Ako je potrebno, mogu pružiti malu zip datoteku kako bih ilustrirao problem.

Odgovor #1

Evo kako to učiniti od verzije Typescript 2.0: (tsd i typings se ukidaju u korist sljedećeg):

npm install --save lodash

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

Zatim, u vašoj .ts datoteci:

Ili :

import * as _ from "lodash";

Ili (kao što je predložio @Naitik):

import _ from "lodash";

Nisam siguran koja je razlika. Mi koristimo i preferiramo prvi sintaksu. Međutim, neki prijavljuju da prvi sintaks njima ne radi, a netko drugi je komentirao da je drugi sintaks nekompatibilan s lenjo učitanim webpack modulima. Vaše iskustvo može varirati.

Uredi 27. veljače 2017:

Prema @Koertu dolje, import * as _ from "lodash"; je jedina radna sintaksa od verzije Typescript 2.2.1, lodash 4.17.4 i @types/lodash 4.14.53. Kaže da druga predložena sintaksa importa daje pogrešku "nema zadanog izvoza".

Odgovor #2

Ažuriranje 26. rujna 2016.:

Kao što @Taytay kaže u svom odgovoru, umjesto instalacija 'typings' koje smo koristili prije nekoliko mjeseci, sada možemo koristiti:

npm install --save @types/lodash

Evo nekoliko dodatnih izvora koji podržavaju taj odgovor:

  • https://www.npmjs.com/package/@types/lodash
  • TypeScript tipizacije u NPM @types org paketima

Ako još uvijek koristite instalaciju tipizacija, pogledajte komentare u nastavku (od drugih) u vezi s '''--ambient''' i '''--global'''.

Također, u novom Quick Startu, konfiguracija više nije u index.html; sada je u systemjs.config.ts (ako se koristi SystemJS).

Izvorni odgovor:

Ovo je radilo na mom Macu (nakon instalacije Angular 2 prema Uputama za brzi početak):

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

Pronaći ćete razne pogođene datoteke, npr.

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

Angular 2 Quickstart koristi System.js, pa sam dodao 'map' u konfiguraciju u index.html na sljedeći način:

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

Tada sam u svom .ts kodu mogao učiniti:

import _ from 'lodash';

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

Izmjene od sredine 2016.:

Kao što spominje @tibbus, u nekim kontekstima, potreban vam je:

import * as _ from 'lodash';

Ako počinjete s angular2-seed, i ako ne želite uvoziti svaki put, možete preskočiti korake mapiranja i uvoza i samo otkomentirati liniju lodash u tools/config/project.config.ts.

Da bih dobio da moji testovi rade s lodashom, također sam morao dodati redak u niz datoteka u karma.conf.js:

'node_modules/lodash/lodash.js',

Odgovor #3

Prvo stvari

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

Učitaj cijelu lodash biblioteku

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

ILI učitaj samo funkcije s kojima ćemo raditi

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

AZURIRANJE - ožujak 2017

Trenutno radim s ES6 modulima, i nedavno sam uspio raditi s lodash na sljedeći način:

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

ILI import određenu funkcionalnost lodash-a:

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

NAPOMENA - razlika je u tome što * as nije potrebno u syntax

Reference:

Sretno.

Odgovor #4

Korak 1: Izmijenite datoteku package.json kako biste uključili lodash u ovisnosti.

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

Korak 2: Koristim SystemJs učitavač modula u svojoj angular2 aplikaciji. Dakle, mijenjat ću datoteku systemjs.config.js kako bih mapirao lodash.

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

Korak 3: Sada izvrši npm install

Korak 4: Za korištenje lodasha u vašoj datoteci.

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

Odgovor #5

Od TypeScripta 2.0, @types npm moduli se koriste za uvoz tipova.

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

Typescript Description
npm install --save @types/lodash

Sada kada je ovo pitanje odgovoreno, objasnit ću kako učinkovito uvesti lodash

Pouzdan način za uvoz cijele biblioteke (u main.ts)

import 'lodash';

Ovo je novi dio ovdje:

Implementacija lakše verzije Lodasha s funkcijama koje su vam potrebne

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

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

PS: Gornji članak je zanimljivo štivo o poboljšanju vremena izgradnje i smanjenju veličine aplikacije

Odgovor #6

Uspješno sam uvezao lodash u svoj projekt koristeći sljedeće naredbe:

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

Zatim sam to uvezao na sljedeći način:

import * as _ from 'lodash';

a u systemjs.config.js definirao/la sam ovo:

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

Povezani članci