Импорт lodash в приложение angular2 + typescript
Я с трудом пытаюсь получить модули lodash импортированы. Я настроил свой проект с помощью npm+gulp и продолжаю ударять по той же стене. Я пробовал обычный лодаш, но также и лодаш-Эс.
пакет NPM lodash: (имеет индекс.JS-файл в корневой папке пакета)
import * as _ from 'lodash';
результаты:
error TS2307: Cannot find module 'lodash'.
пакет NPM lodash-es: (имеет экспорт defaut в lodash.js I корневая папка пакета)
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']);
если я правильно понимаю, moduleResolution:' node ' в моем tsconfig должен указывать операторы импорта в папку node_modules, где установлены lodash и lodash-es. У меня тоже есть пробовал много разных способов импорта: абсолютные пути, относительные пути, но ничего не работает. Есть идеи?
при необходимости я могу предоставить небольшой zip-файл, чтобы проиллюстрировать проблему.
22 ответа:
вот как это сделать с Typescript 2.0: (tsd и typings устарели в пользу следующего):
$ npm install --save lodash # This is the new bit here: $ npm install --save-dev @types/lodash
тогда, по-вашему .файл ТС:
либо:
import * as _ from "lodash";
или (как предложил @Naitik):
import _ from "lodash";
Я не уверен, в чем разница. Мы используем и предпочитаем первый синтаксис. Однако некоторые сообщают, что первый синтаксис не работает для них, а кто-то еще прокомментировал, что последний синтаксис несовместим с ленивыми загруженными модулями webpack. МММ.
Edit on Feb 27th, 2017:
согласно @Koert ниже,
import * as _ from "lodash";
является единственным рабочим синтаксисом с Typescript 2.2.1, lodash 4.17.4 и @types / lodash 4.14.53. Он говорит, что другой предложенный синтаксис импорта дает ошибку "не имеет экспорта по умолчанию".
Обновление 26 Сентября 2016:
как говорится в ответе @Taytay, вместо установок "typings", которые мы использовали несколько месяцев назад, теперь мы можем использовать:
npm install --save @types/lodash
вот некоторые дополнительные ссылки, подтверждающие, что ответить:
если все еще используется типирование установка, см. комментарии ниже (другими) относительно "'--ambient"' и "'--global"'.
кроме того, в новом быстром запуске конфигурация больше не находится в индексе.html; теперь он находится в systemjs.конфиг.ts (при использовании SystemJS).
Оригинальный Ответ:
это работало на моем mac (после установки Angular 2 согласно Быстрый Старт):
sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save
вы найдете различные файлы затронуты, например,
- / typings / main.д.ТС
- /typings.json
- /пакет.json
угловой 2 Quickstart использует систему.js, поэтому я добавил "карту" в конфигурацию в индексе.HTML следующим образом:
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, и если вы не хотите импортировать каждый раз, вы можете пропустить шаги map и import и просто раскомментировать строку lodash в tools/config/project.конфиг.ТС.
чтобы мои тесты работали с lodash, мне также пришлось добавить строку в массив файлов в karma.конф.js:
'node_modules/lodash/lodash.js',
Шаг 1: изменить пакет.JSON-файл для включения lodash в зависимости.
"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: я использую загрузчик модуля SystemJs в своем приложении angular2. Поэтому я бы изменил systemjs.конфиг.js файл для отображения 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);
Шаг 3: Теперь сделайте npm install
Шаг 4: чтобы использовать lodash в вашем файле.
import * as _ from 'lodash'; let firstIndexOfElement=_.findIndex(array,criteria);
первым делом
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) ...
или
import
конкретныеlodash functionality
:import debounce from 'lodash/debounce' //work with the debounce function directly debounce(...) // this too is typesafe (as expected) ...
Примечание - разница в том,
* as
не требуетсяsyntax
ссылки:
Удачи.
начиная с Typescript 2.0, модули @ types npm используются для импорта типов.
# Implementation package (required to run) $ npm install --save lodash # Typescript Description $ npm install --save @types/lodash
Теперь, когда на этот вопрос был дан ответ, я расскажу, как эффективно импортировать lodash
отказоустойчивый способ импорта всей библиотеки (в основном.ts)
import 'lodash';
это новый бит здесь:
реализация более легкого 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 в свой проект со следующими командами:
npm install lodash --save typings install lodash --save
затем я импортировал его следующим образом:
import * as _ from 'lodash';
и в systemjs.конфиг.js я определил это:
map: { 'lodash' : 'node_modules/lodash/lodash.js' }
еще одно элегантное решение-получить только то, что вам нужно, а не импортировать все lodash
import {forEach,merge} from "lodash";
и затем использовать его в коде
forEach({'a':2,'b':3}, (v,k) => { console.log(k); })
у меня была точно такая же проблема, но в приложении Angular2, и эта статья просто решает ее: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli
краткое содержание статьи:
- установка библиотеки
npm install lodash --save
- добавить определения машинописного текста для Lodash
tsd install underscore
- В Том Числе Скрипт
<script src="node_modules/lodash/index.js"></script>
- Настройка SystemJS
System.config({ paths: { lodash: './node_modules/lodash/index.js'
- Импортировать Модуль
import * as _ from ‘lodash’;
Я надеюсь, что это может быть полезным для вашего случая тоже
если кто-то еще сталкивается с этой проблемой, и ни одно из вышеперечисленных решений не работает из-за проблем с" дубликатом идентификатора", запустите это:
npm install typings --global
С более старыми версиями типизаций все испортится, и вы получите кучу проблем с "дубликатом идентификатора". Также вам не нужно использовать
--ambient
больше насколько я мог сказать.поэтому, как только типизация обновлена, это должно работать (используя краткое руководство Angular 2).
Run:
npm install lodash --save typings install lodash --save
во-первых, добавьте к этому systemjs.конфиг.js:
'lodash': 'node_modules/lodash/lodash.js'
теперь вы можете использовать это в любом файл:
import * as _ from 'lodash';
удалите папку typings и запустите
npm install
если у вас все еще есть проблемы.
обратите внимание:
npm install --save
будет способствовать любой зависимости ваше приложение требует в производственном коде.
Что касается" типизации", то она требуется только для TypeScript, который в конечном итоге транспилируется в JavaScript. Поэтому вы, вероятно, не хотите иметь их в производственном коде. Я предлагаю поместить его в ваш проект , С помощьюnpm install --save-dev @types/lodash
или
npm install -D @types/lodash
(см., например, сообщение Akash). Кстати, именно так это делается в ng2 туто.
кроме того, вот как ваш пакет.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
если вы не уверены в последней доступной версии зависимости, которую вы ищете, и она автоматически установит ее для вас в вашемpackage.json
для дальнейшего использования.
Я создал typings для
lodash-es
кроме того, теперь вы можете сделать следующееустановить
npm install lodash-es -S npm install @types/lodash-es -D
использование
import kebabCase from "lodash-es/kebabCase"; const wings = kebabCase("chickenWings");
если вы используете rollup, я предлагаю использовать это вместо
lodash
как это будет treeshaken правильно.
частичный импорт из лодашь должны работать в угловое 4.1.x используя следующие обозначения:
let assign = require('lodash/assign');
или использовать 'lodash-es' и импортировать в модуль:
import { assign } from 'lodash-es';
- установить лодашь
sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save
- в индекс.html, добавить карту для lodash:
System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });
- In .TS код импорта модуля lodash
import _ from 'lodash';
Я использую ng2 с webpack, а не system JS. Шаги, необходимые для меня были:
npm install underscore --save typings install dt~underscore --global --save
и затем в файле я хочу импортировать подчеркивание в:
import * as _ from 'underscore';
управление типами через
typings
иtsd
команды в конечном счете устарели в пользу использования npm черезnpm install @types/lodash
.однако я долго боролся с" не могу найти модуль lodash " в инструкции импорта:
import * as _ from 'lodash';
в конечном итоге я понял, что Typescript будет загружать только типы из node_modules/@types start version 2, а моя языковая служба VsCode все еще использует 1.8, поэтому редактор сообщал об ошибках.
если вы используете VSCode, вы захотите включить
"typescript.tsdk": "node_modules/typescript/lib"
в настройках VSCode.JSON-файл (для настройки рабочего пространства) и убедитесь, что у вас установлена версия typescript >= 2.0.0 через
npm install typescript@2.0.2 --save-dev
после этого мой редактор не будет жаловаться на заявление импорта.
если не работает после
$ npm install lodash --save $ npm install --save-dev @types/lodash
попробуй это и импортируй лодаш
typings install lodash --save
установить с помощью
npm
.$ npm install lodash --save
теперь
import
в файле:$ import * as _ from 'lodash';
ENV:
угловой CLI: 1.6.6
Узел: 6.11.2
OS: darwin x64
Угловой: 5.2.2
машинопись: 2.4.2
webpack: 3.10.0
установить все через терминал:
npm install lodash --save tsd install lodash --save
добавить пути в индекс.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>
импорт lodash в верхней части.файл TS
import * as _ from 'lodash'
Я на угловой 4.0.0 с помощью preboot / angular-webpack, и пришлось идти немного другим маршрутом.
решение, предоставленное @Taytay, в основном работало для меня:
npm install --save lodash npm install --save @types/lodash
и импорт функций в данный .деталь.ТС файл с помощью:
import * as _ from "lodash";
это работает, потому что нет" по умолчанию " экспортированный класс. Разница в моем заключалась в том, что мне нужно было найти способ, который был предоставлен для загрузки в сторонние библиотеки: поставщика.ТС, которые сидели на:
src/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 (также переустановил через вышеуказанные предложения).
короче говоря, проблема была связана с использованием
_.has
метод лодашь.я исправил это, просто используя JS
in
оператора.