将lodash导入到angular + typescript应用程序中

我有一个困难的时间试图得到lodash模块导入。我已经使用npm+gulp设置了我的项目，并不断撞击相同的墙。我试过普通的lodash，也试过lodash。

lodash npm包:(在包根文件夹中有一个index.js文件)

import * as _ from 'lodash';

结果:

error TS2307: Cannot find module 'lodash'.

lodash-es npm包:(在lodash.js的包根文件夹中有一个默认的导出)

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

如果我理解正确，我的tsconfig中的modulerresolution:'node'应该将import语句指向node_modules文件夹，其中安装了lodash和lodash-es。我还尝试了许多不同的导入方法:绝对路径、相对路径，但似乎都不起作用。什么好主意吗?

如果有必要，我可以提供一个小zip文件来说明这个问题。

当前回答

如果不工作后

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

您尝试这样做并导入lodash

typings install lodash --save

2017-08-02 11:12:28

其他回答

重要的事情先说

NPM安装——保存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)

更新- 2017年3月

我目前正在使用ES6模块，最近我能够像这样使用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)
...

或导入特定的lodash功能:

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

注意-语法中不需要* as的区别

引用:

祝你好运。

2016-11-19 05:40:20

尝试>> TSD安装lodash—保存

2016-02-19 05:00:46

我成功地在我的项目中导入了lodash，使用以下命令:

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

然后我导入它的方式如下:

Import * as _ from 'lodash';

在systemjs.config.js中我定义了这个:

地图:“lodashs: node_modules/lodash/lodash。”

2016-07-13 16:31:23

通过npm安装。

$ npm install lodash --save

现在在文件中导入:

$ import * as _ from 'lodash';

ENV:

Angular CLI: 1.6.6 节点:6.11.2 操作系统:darwin x64 角:22 打印稿:2.4.2 webpack: 3.10.0

2018-02-12 05:19:34

从Typescript 2.0开始，@types npm模块被用来导入类型。

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

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

既然已经回答了这个问题，我将讨论如何有效地导入lodash

导入整个库的安全方法(在main.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:上面的文章是一篇关于改善构建时间和减少应用大小的有趣文章

2016-10-13 08:10:04

将lodash导入到angular + typescript应用程序中

推荐文章

标签

最新文章