Mam problem z importem modułów lodash. Skonfigurowałem swój projekt za pomocą npm + gulp i wciąż uderzam w tę samą ścianę. Próbowałem zwykłego lodash, ale także lodash-es.
Pakiet Lodash npm: (ma plik index.js w folderze głównym pakietu)
import * as _ from 'lodash';
Prowadzi do:
error TS2307: Cannot find module 'lodash'.
Pakiet lodash-es npm: (ma defaut eksport w lodash.js w folderze głównym pakietu)
import * as _ from 'lodash-es/lodash';
Prowadzi do:
error TS2307: Cannot find module 'lodash-es'.
Zarówno zadanie przełykania, jak i burza zgłaszają ten sam problem.
Zabawny fakt, że nie zwraca błędu:
import 'lodash-es/lodash';
... ale oczywiście nie ma „_”…
Mój plik tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Mój plik 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']);
Jeśli dobrze rozumiem, modułResolution: 'node' w moim tsconfig powinien kierować instrukcje importu do folderu node_modules, w którym są zainstalowane lodash i lodash-es. Próbowałem też wielu różnych sposobów importowania: ścieżki bezwzględne, ścieżki względne, ale nic nie działa. Jakieś pomysły?
W razie potrzeby mogę dostarczyć mały plik zip, aby zilustrować problem.
Odpowiedzi:
Oto jak to zrobić od Typescript 2.0: (tsd i typowania są przestarzałe na rzecz następujących):
Następnie w pliku .ts:
Zarówno:
Lub (zgodnie z sugestią @Naitik):
Nie jestem pewien, jaka jest różnica. Używamy i preferujemy pierwszą składnię. Jednak niektórzy twierdzą, że pierwsza składnia nie działa dla nich, a ktoś inny skomentował, że druga składnia jest niezgodna z modułami leniwie ładowanego pakietu webpack. YMMV.
Edytuj w dniu 27 lutego 2017 r .:
Według @Koert poniżej,
import * as _ from "lodash";
jest jedyną działającą składnią od Typescript 2.2.1, lodash 4.17.4 i @ types / lodash 4.14.53. Mówi, że druga sugerowana składnia importu daje błąd „nie ma domyślnego eksportu”.źródło
typescript 2.0.3
. Rzeczywiście usunięcietypings
na korzyść@types
pakietu npm jest znacznie czystsze.import * as _ from "lodash";
nie działało dla mnie, aleimport _ from "lodash";
działa.import _ from "lodash"
składnia jest niezgodna z leniwie ładowanymi modułami webpack. Nie jestem pewien, dlaczego, nie zbadałem szczegółowo.npm install --save-dev @types/lodash
Jeśli widzisz dziwne problemy i błędy, spróbuj tego:npm install --save-dev @types/[email protected]
Aktualizacja 26 września 2016 r .:
Jak mówi odpowiedź @ Taytaya, zamiast instalacji „typowania”, z których korzystaliśmy kilka miesięcy temu, możemy teraz użyć:
Oto kilka dodatkowych referencji potwierdzających tę odpowiedź:
Jeśli nadal korzystasz z instalacji do pisania, zobacz poniższe komentarze (przez innych) dotyczące „--ambient” „” i „- - globalny”.
Ponadto w nowym Szybki Start konfiguracji nie ma już w index.html; jest teraz w pliku systemjs.config.ts (jeśli używasz SystemJS).
Oryginalna odpowiedź:
To działało na moim Macu (po zainstalowaniu Angulara 2 zgodnie z Quick Start ):
Znajdziesz różne pliki, których to dotyczy, np
Angular 2 Quickstart używa System.js, więc dodałem „map” do konfiguracji w index.html w następujący sposób:
Następnie w moim kodzie .ts mogłem:
Edycje od połowy 2016 r .:
Jak wspomina @tibbus, w niektórych kontekstach potrzebujesz:
Jeśli zaczynasz od angular2-seed i jeśli nie chcesz zaimportować za każdym razem, możesz pominąć mapę i zaimportować kroki i po prostu odkomentować wiersz lodash w tools / config / project.config.ts.
Aby moje testy działały z lodash, musiałem również dodać wiersz do tablicy plików w karma.conf.js:
źródło
map: { lodash: 'node_modules/lodash/lodash.js' }
wSystem.config
?import * as _ from 'lodash'
zamiastimport _ from 'lodash'
?--ambient
jest dawnym--global
. Ten ostatni jest używany w wersji 1.xi porusza się do przodu. Chociaż nie sądzę, aby najnowsza lodash 4.x skompilowała się jako taki moduł globalny.Najpierw najważniejsze
npm install --save lodash
npm install -D @types/lodash
Załaduj pełną bibliotekę lodash
LUB ładuj tylko funkcje, z którymi będziemy pracować
UPDATE - March 2017
Obecnie pracuję z
ES6 modules
, a ostatnio mogłem pracować zlodash
:LUB
import
specyficznelodash functionality
:UWAGA - różnica nie
* as
jest wymagana wsyntax
Bibliografia:
Powodzenia.
źródło
import debounce from 'lodash/debounce'
dajeTS1192: Module node_modules/@types/lodash/debounce has no default export
kiedy"allowSyntheticDefaultImports": false
"allowSyntheticDefaultImports": true
opcji kompilatora w pliku tsconfig.json może być konieczne, aby uniknąć błędów.Krok 1: Zmodyfikuj plik package.json, aby uwzględnić lodash w zależnościach.
Krok 2: Korzystam z modułu ładującego SystemJs w mojej aplikacji angular2. Więc zmodyfikowałbym plik systemjs.config.js, aby zmapować lodash.
Krok 3: Teraz zainstaluj npm
Krok 4: Aby użyć lodash w pliku.
źródło
Od Typescript 2.0 moduły @types npm są używane do importowania typów.
Teraz, gdy udzielono odpowiedzi na to pytanie, zajmę się tym, jak skutecznie importować lodash
Bezpieczny sposób na zaimportowanie całej biblioteki (w main.ts)
Oto nowy bit tutaj:
Wdrażanie jaśniejszej laszówki z wymaganymi funkcjami
źródło: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd
PS: Powyższy artykuł stanowi interesującą lekturę na temat poprawy czasu kompilacji i zmniejszenia rozmiaru aplikacji
źródło
error TS1192: Module '"node_modules/@types/lodash/chain/index"' has no default export.
I tak dalej w przypadku innych modułów próbującychimport chain from "lodash/chain"
importować krótsze produktyPomyślnie zaimportowałem lodash do mojego projektu za pomocą następujących poleceń:
Następnie zaimportowałem go w następujący sposób:
import * as _ from 'lodash';
i w systemjs.config.js zdefiniowałem to:
map: { 'lodash' : 'node_modules/lodash/lodash.js' }
źródło
Miałem dokładnie ten sam problem, ale w aplikacji Angular2, a ten artykuł po prostu go rozwiązuje: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli
Podsumowanie artykułu:
npm install lodash --save
tsd install underscore
<script src="node_modules/lodash/index.js"></script>
System.config({ paths: { lodash: './node_modules/lodash/index.js'
import * as _ from ‘lodash’;
Mam nadzieję, że może się przydać również w twoim przypadku
źródło
Innym eleganckim rozwiązaniem jest zdobycie tylko tego, czego potrzebujesz, a nie importowanie całej lodash
a następnie użyj go w kodzie
źródło
Jeśli ktoś napotka ten problem i żadne z powyższych rozwiązań nie działa z powodu problemów z „zduplikowanym identyfikatorem”, uruchom to:
W starszych wersjach pisania wszystko się psuje i pojawia się mnóstwo problemów z „zduplikowanym identyfikatorem”. Poza tym nie muszę
--ambient
już używać, o ile mogę powiedzieć.Więc kiedy pisanie jest aktualne, powinno to działać (przy użyciu szybkiego startu Angular 2).
Biegać:
Najpierw dodaj to do systemjs.config.js:
Teraz możesz użyć tego w dowolnym pliku:
import * as _ from 'lodash';
Usuń folder z typami i uruchom,
npm install
jeśli nadal masz problemy.źródło
Pamiętaj, że
npm install --save
zwiększy to zależność od aplikacji wymaganą w kodzie produkcyjnym.Jeśli chodzi o „typowanie”, jest ono wymagane tylko przez TypeScript, który ostatecznie jest transpilowany w JavaScript. Dlatego prawdopodobnie nie chcesz mieć ich w kodzie produkcyjnym. Sugeruję umieszczenie go w projekcie
devDependencies
zamiast za pomocąlub
(patrz na przykład post Akash). Nawiasem mówiąc, jest to sposób, w jaki odbywa się to w ng2 tuto.
Alternatywnie, oto jak może wyglądać twoja paczka.json:
tylko wskazówka
Zaletą
npm
jest to, że możesz zacząć od zrobienianpm install --save
lub--save-dev
jeśli nie masz pewności co do najnowszej dostępnej wersji zależności, której szukasz, i automatycznie ustawi ją dla Ciebie wpackage.json
celu dalszego wykorzystania.źródło
Stworzyłem
lodash-es
również pisanie dla , więc teraz możesz właściwie wykonać następujące czynnościzainstalować
stosowanie
jeśli użyjesz rollupa, sugeruję użycie tego zamiast tego,
lodash
ponieważ będzie to odpowiednio wstrząsnąć drzewem.źródło
Częściowy import z lodash powinien działać w układzie kątowym 4.1.x, stosując następującą notację:
Lub użyj „lodash-es” i zaimportuj do modułu:
źródło
import { assign } from 'lodash-es';
wydaje się wciąż importować całą bibliotekę (sądząc po rozmiarze pakietu)Zainstaluj przez
npm
.Teraz
import
w pliku:ENV:
źródło
sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save
System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });
import _ from 'lodash';
źródło
$ typings install lodash --ambient --save typings ERR! message https://api.typings.org/entries/npm/lodash/versions/latest responded with 407, expected it to equal 200
Używam ng2 z webpack, a nie system JS. Potrzebne mi były następujące kroki:
a następnie w pliku chcę zaimportować podkreślenie do:
źródło
Zarządzanie typami przez
typings
itsd
polecenia jest ostatecznie przestarzałe na korzyść używania npm przeznpm install @types/lodash
.Długo jednak zmagałem się z „Nie można znaleźć modułu pseudonimu” w zestawieniu importu:
W końcu zdałem sobie sprawę, że Typescript ładuje typy tylko z node_modules / @ types start version 2, a moja usługa VsCode Language wciąż używa 1.8, więc edytor zgłaszał błędy.
Jeśli używasz VSCode, chcesz dołączyć
w pliku VSCode settings.json (ustawienia obszaru roboczego) i upewnij się, że masz wersję na maszynie> = 2.0.0 zainstalowaną przez
npm install [email protected] --save-dev
Potem mój redaktor nie będzie narzekał na wyciąg z importu.
źródło
jeśli dawka nie działa później
spróbuj tego i zaimportuj lodash
źródło
npm install --save @types/lodash
https://www.npmjs.com/package/@types/lodash
źródło
Zainstaluj wszystkie terminale:
Dodaj ścieżki w index.html
Zaimportuj lodash na górze pliku .ts
źródło
Korzystam z Angular 4.0.0, używając preboot / angular-webpack , i musiałem wybrać nieco inną trasę.
Rozwiązanie dostarczone przez @Taytay działało głównie dla mnie:
i import funkcji do danego pliku .component.ts przy użyciu:
Działa to, ponieważ nie istnieje „domyślna” klasa eksportu. Różnica polegała na tym, że potrzebowałem znaleźć sposób na załadowanie do bibliotek stron trzecich: vendor.ts, który znajdował się w:
Mój plik vendor.ts wygląda teraz tak:
źródło
Być może jest to zbyt dziwne, ale żadne z powyższych nie pomogło mi przede wszystkim, ponieważ poprawnie zainstalowałem lodash (również ponownie zainstalowany za pomocą powyższych sugestii).
Krótko mówiąc, kwestia ta związana była z zastosowaniem
_.has
metody z lodash .Naprawiłem to, używając po prostu
in
operatora JS .źródło
spróbuj >>
tsd install lodash --save
źródło
Możesz również przejść dalej i zaimportować za pomocą starych dobrych wymagań, tj .:
To jedyna rzecz, która działała dla nas. Oczywiście upewnij się, że wszelkie wywołania metody wymaganej () pochodzą po imporcie.
źródło