Tôi đang gặp khó khăn khi cố gắng để có được các mô-đun lodash được nhập khẩu. Tôi đã thiết lập dự án của mình bằng cách sử dụng npm + gulp và tiếp tục nhấn vào cùng một bức tường. Tôi đã thử lodash thường xuyên, nhưng cũng lodash-es.

Gói npm lodash: (có tệp index.js trong thư mục gốc của gói)

import * as _ from 'lodash';    

Kết quả trong:

error TS2307: Cannot find module 'lodash'.

Gói lodash-es npm: (có xuất tự động trong lodash.js i thư mục gốc gói)

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

Kết quả trong:

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

Cả tác vụ gulp và webstorm đều báo cáo cùng một vấn đề.

Thật buồn cười, điều này trả về không có lỗi:

import 'lodash-es/lodash';

... nhưng tất nhiên không có "_" ...

Tệp tsconfig.json của tôi:

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

Gulpfile.js của tôi:

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

Nếu tôi hiểu chính xác, moduleResolution: 'node' trong tsconfig của tôi sẽ trỏ các câu lệnh nhập vào thư mục node_modules, nơi cài đặt lodash và lodash-es. Tôi cũng đã thử nhiều cách khác nhau để nhập: đường dẫn tuyệt đối, đường dẫn tương đối, nhưng dường như không có gì hoạt động. Có ý kiến ​​gì không?

Nếu cần tôi có thể cung cấp một tệp zip nhỏ để minh họa vấn đề.

Dưới đây là cách thực hiện việc này kể từ Bản mô tả 2.0: (tsd và các kiểu chữ đang bị phản đối theo hướng sau):

$ npm install --save lodash

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

Sau đó, trong tệp .ts của bạn:

Hoặc:

import * as _ from "lodash";

Hoặc (theo đề xuất của @Naitik):

import _ from "lodash";

Tôi không tích cực về sự khác biệt. Chúng tôi sử dụng và thích cú pháp đầu tiên. Tuy nhiên, một số báo cáo rằng cú pháp đầu tiên không hoạt động đối với họ và một người khác đã nhận xét rằng cú pháp sau không tương thích với các mô-đun webpack được tải lười biếng. YMMV.

Chỉnh sửa vào ngày 27 tháng 2 năm 2017:

Theo @Koert dưới đây, import * as _ from "lodash";là cú pháp làm việc duy nhất kể từ Bản mô tả 2.2.1, bản lodash 4.17.4 và @ type / lodash 4.14.53. Ông nói rằng cú pháp nhập được đề xuất khác đưa ra lỗi "không có xuất mặc định".

Cập nhật ngày 26 tháng 9 năm 2016:

Như câu trả lời của @ Taytay nói, thay vì các bản cài đặt 'typings' mà chúng ta đã sử dụng vài tháng trước, giờ đây chúng ta có thể sử dụng:

npm install --save @types/lodash

Dưới đây là một số tài liệu tham khảo bổ sung hỗ trợ câu trả lời đó:

• https://www.npmjs.com/package/@types/lodash
• Kiểu chữ TypeScript trong gói org NPM @types

Nếu vẫn sử dụng cài đặt đánh máy, hãy xem các bình luận bên dưới (của người khác) về '' '--ambient' '' và '' '--global' ''.

Ngoài ra, trong Khởi động nhanh mới, cấu hình không còn trong index.html; bây giờ trong systemjs.config.ts (nếu sử dụng SystemJS).

Câu trả lời gốc:

Điều này hoạt động trên máy mac của tôi (sau khi cài đặt Angular 2 theo Khởi động nhanh ):

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

Bạn sẽ tìm thấy các tập tin khác nhau bị ảnh hưởng, ví dụ

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

Angular 2 Quickstart sử dụng System.js, vì vậy tôi đã thêm 'map' vào cấu hình trong index.html như sau:

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

Sau đó, trong mã .ts của tôi, tôi đã có thể làm:

import _ from 'lodash';

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

Chỉnh sửa từ giữa năm 2016:

Như @tibbus đề cập, trong một số bối cảnh, bạn cần:

import * as _ from 'lodash';

Nếu bắt đầu từ angular2-seed và nếu bạn không muốn nhập mỗi lần, bạn có thể bỏ qua các bước ánh xạ và nhập và chỉ cần bỏ dòng lodash trong tools / config / project.config.ts.

Để làm cho các thử nghiệm của tôi hoạt động với lodash, tôi cũng đã phải thêm một dòng vào mảng tệp trong karma.conf.js:

'node_modules/lodash/lodash.js',

Điều đầu tiên

npm install --save lodash

npm install -D @types/lodash

Tải thư viện lodash đầy đủ

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

HOẶC chỉ tải các chức năng chúng ta sẽ làm việc với

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

UPDATE - March 2017

Tôi hiện đang làm việc ES6 modulesvà gần đây tôi đã có thể làm việc lodashnhư vậy:

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

HOẶC importcụ thể lodash functionality:

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

LƯU Ý - sự khác biệt * aslà không bắt buộc trongsyntax

Người giới thiệu:

Chúc may mắn.

Bước 1: Sửa đổi tệp pack.json để bao gồm lodash trong phần phụ thuộc.

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

Bước 2: Tôi đang sử dụng trình tải mô-đun SystemJs trong ứng dụng angular2 của mình. Vì vậy, tôi sẽ sửa đổi tệp systemjs.config.js thành ánh xạ 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);

Bước 3: Bây giờ hãy cài đặt npm

Bước 4: Để sử dụng lodash trong tập tin của bạn.

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

Kể từ Typecript 2.0, các mô đun @types npm được sử dụng để nhập các kiểu chữ.

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

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

Bây giờ vì câu hỏi này đã được trả lời, tôi sẽ đi vào cách nhập lodash hiệu quả

Cách không an toàn để nhập toàn bộ thư viện (trong main.ts)

import 'lodash';

Đây là bit mới ở đây:

Thực hiện một lodash nhẹ hơn với các chức năng bạn yêu cầu

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

nguồn: https://medium.com/making-iternets/why-USE-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS: Bài viết trên là một bài đọc thú vị về việc cải thiện thời gian xây dựng và giảm kích thước ứng dụng

Tôi đã nhập thành công lodash trong dự án của mình với các lệnh sau:

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

Sau đó, tôi nhập nó theo cách sau:

import * as _ from 'lodash';

và trong systemjs.config.js tôi đã định nghĩa điều này:

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

Tôi đã có chính xác vấn đề tương tự, nhưng trong một ứng dụng Angular2, và bài viết này chỉ cần giải quyết nó: https://medium.com/@s_eschweiler/USE-external-lologists-with-angular-2-87e06db8e5d1#.p6gra5eli

Tóm tắt bài viết:

1. Cài đặt thư viện npm install lodash --save
2. Thêm định nghĩa TypeScript cho Lodash tsd install underscore
3. Bao gồm Script <script src="node_modules/lodash/index.js"></script>
4. Cấu hình SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
5. Mô-đun nhập khẩu import * as _ from ‘lodash’;

Tôi hy vọng nó cũng có thể hữu ích cho trường hợp của bạn

Một giải pháp tao nhã khác là chỉ lấy những gì bạn cần, không nhập tất cả các lodash

import {forEach,merge} from "lodash";

và sau đó sử dụng nó trong mã của bạn

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

Nếu bất kỳ ai khác gặp phải vấn đề này và không có giải pháp nào ở trên hoạt động do vấn đề "Định danh trùng lặp", hãy chạy điều này:

npm install typings --global

Với các phiên bản cũ hơn của việc đánh máy, mọi thứ sẽ rối tung lên và bạn sẽ gặp phải một loạt các vấn đề "Định danh trùng lặp". Ngoài ra, bạn không cần phải sử dụng --ambientnữa như tôi có thể nói.

Vì vậy, một khi các kiểu chữ được cập nhật, điều này sẽ hoạt động (sử dụng khởi động nhanh Angular 2).

Chạy:

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

Đầu tiên, thêm phần này vào systemjs.config.js:

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

Bây giờ bạn có thể sử dụng điều này trong bất kỳ tập tin: import * as _ from 'lodash';

Xóa thư mục đánh máy của bạn và chạy npm installnếu bạn vẫn gặp sự cố.

Xin lưu ý rằng npm install --savesẽ thúc đẩy bất kỳ sự phụ thuộc nào mà ứng dụng của bạn yêu cầu trong mã sản xuất.
Đối với "typings", nó chỉ được yêu cầu bởi TypeScript, cuối cùng được dịch mã bằng JavaScript. Do đó, có lẽ bạn không muốn có chúng trong mã sản xuất. Tôi đề nghị thay thế nó trong dự án của bạn devDependencies, bằng cách sử dụng

npm install --save-dev @types/lodash

hoặc là

npm install -D @types/lodash

(xem bài Akash chẳng hạn). Nhân tiện, đó là cách nó được thực hiện trong ng2 tuto.

Ngoài ra, đây là cách gói.json của bạn có thể trông như sau:

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

chỉ là một mẹo

Điều thú vị npmlà bạn có thể bắt đầu bằng cách đơn giản npm install --savehoặc --save-devnếu bạn không chắc chắn về phiên bản mới nhất có sẵn của phụ thuộc mà bạn đang tìm kiếm và nó sẽ tự động đặt nó cho bạn để bạn package.jsonsử dụng thêm.

Tôi cũng đã tạo ra các kiểu chữ lodash-es, vì vậy bây giờ bạn thực sự có thể làm như sau

Tải về

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

sử dụng

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

Nếu bạn sử dụng rollup, tôi khuyên bạn nên sử dụng cái này thay vì lodashnó sẽ được treeshaken đúng cách.

Nhập một phần từ lodash sẽ hoạt động ở góc 4.1.x bằng cách sử dụng ký hiệu sau:

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

Hoặc sử dụng 'lodash-es' và nhập trong mô-đun:

import { assign } from 'lodash-es';

Cài đặt qua npm.

$ npm install lodash --save

Bây giờ, importtrong tệp:

$ import * as _ from 'lodash';

ENV:

Angular CLI: 1.6.6
Nút: 6.11.2
HĐH: darwin x64
Angular: 5.2.2
bản thảo: 2.4.2
webpack: 3.10.0

1. Cài đặt lodash

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

2. Trong index.html, thêm bản đồ cho lodash:

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

3. Trong mô-đun nhập lodash mã .ts

import _ from 'lodash';

Tôi đang sử dụng ng2 với webpack, không phải hệ thống JS. Các bước cần cho tôi là:

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

và sau đó trong tệp tôi muốn nhập dấu gạch dưới vào:

import * as _ from 'underscore';

Việc quản lý các loại thông qua typingsvà tsdcác lệnh cuối cùng không được dùng để sử dụng npm thông quanpm install @types/lodash .

Tuy nhiên, tôi đã vật lộn với "Không thể tìm thấy mô-đun lodash" trong câu lệnh nhập trong một thời gian dài:

import * as _ from 'lodash';

Cuối cùng, tôi nhận ra Typecript sẽ chỉ tải các loại từ node_modules / @ type start phiên bản 2 và dịch vụ Ngôn ngữ VsCode của tôi vẫn đang sử dụng 1.8, vì vậy trình soạn thảo đã báo cáo lỗi.

Nếu bạn đang sử dụng VSCode, bạn sẽ muốn bao gồm

"typescript.tsdk":  "node_modules/typescript/lib"

trong tệp VSCode settings.json của bạn (đối với cài đặt không gian làm việc) và đảm bảo bạn có phiên bản bản thảo> = 2.0.0 được cài đặt qua npm install typescript@2.0.2 --save-dev

Sau đó, biên tập viên của tôi sẽ không phàn nàn về báo cáo nhập khẩu.

nếu không làm việc sau

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

bạn thử cái này và nhập lodash

typings install lodash --save

npm install --save @types/lodash

https://www.npmjs.com/package/@types/lodash

Cài đặt tất cả các thiết bị đầu cuối thông qua:

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

Thêm đường dẫn trong index.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>

Nhập lodash ở đầu tệp .ts

import * as _ from 'lodash'

Tôi đang sử dụng Angular 4.0.0 bằng cách sử dụng gói preboot / angular-webpack và phải đi một con đường hơi khác.

Giải pháp được cung cấp bởi @Taytay hầu hết có hiệu quả với tôi:

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

và nhập các hàm vào tệp .component.ts đã cho bằng cách sử dụng:

import * as _ from "lodash";

Điều này hoạt động vì không có lớp xuất "mặc định". Sự khác biệt trong tôi là tôi cần tìm cách cung cấp để tải trong các thư viện của bên thứ 3: eller.ts ngồi ở:

src/vendor.ts

Bây giờ tập tin của nhà cung cấp của tôi trông như thế này:

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

Có thể nó quá lạ, nhưng trước hết không có gì ở trên giúp tôi cả, vì tôi đã cài đặt đúng lodash (cũng được cài đặt lại thông qua các gợi ý ở trên).

Vì vậy, câu chuyện dài ngắn vấn đề được kết nối với việc sử dụng _.hasphương pháp từ lodash .

Tôi đã sửa nó bằng cách sử dụng intoán tử JS .

thử >> tsd install lodash --save

Bạn cũng có thể tiếp tục và nhập thông qua yêu cầu cũ, nghĩa là:

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

Đây là điều duy nhất làm việc cho chúng tôi. Tất nhiên, đảm bảo mọi cuộc gọi yêu cầu () đến sau khi nhập.