Импорт 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 199

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


ссылки:

enter image description here

Удачи.

начиная с 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

краткое содержание статьи:

  1. установка библиотеки npm install lodash --save
  2. добавить определения машинописного текста для Lodash tsd install underscore
  3. В Том Числе Скрипт <script src="node_modules/lodash/index.js"></script>
  4. Настройка SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
  5. Импортировать Модуль 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';
  1. установить лодашь

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

  1. в индекс.html, добавить карту для lodash:

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

  1. 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 оператора.

вы также можете пойти дальше и импортировать через старый добрый require, т. е.:

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

это единственное, что сработало для нас. Конечно, убедитесь, что все вызовы require () поступают после импорта.

попробовать >> tsd install lodash --save