我有一个使用Lodash的Angular5应用程序，这一切都可以通过WebPack（它的Angular5，因此WebPack而不是Angular Cli）正常工作。
测试时收到错误：
TypeError：无法读取未定义的属性'isNil'
这是一个Angular 5项目，我使用WebPack和karma运行之前的输出显示lodash被捆绑在一起。
Asset Size Chunks Chunk Names config/spec-bundle.js 19.4 MB 0 [emitted] [big]config / spec-bundle.js [27] ./node_modules/lodash/lodash.js 540 kB {0} [built] [33] ./node_modules/@angular/core/esm5/testing.js 47.4 kB {0} [ [114] ./node_modules/rxjs/Rx.js 9.79 kB {0} [built] [473] ./config/spec-bundle.js 2.05 kB {0} [built] [475] ./node_modules/core -js / es6 / index.js 5.88 kB {0} [built] [620] ./node_modules/core-js/es7/reflect.js 510字节{0} [built] [631] ./ node_modules/zone.js /dist/zone.js 126 kB {0} [built] [632] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.22 kB {0} [built] [633] ./ node_modules /zone.js/dist/proxy.js 5.6 kB {0} [built] [634] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0} [built] [635] ./node_modules /zone.js/dist/jasmine-patch.js 6.36 kB {0} [built] [636] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0} [built] [637]。 /node_modules/zone.js/dist/fake-async-test.js 17 kB {0} [built] [910] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17.8 kB {0} [建设]
它也正确地在组件中导入使用
import _ from 'lodash'
我的webpack配置在这里：
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
/**
* Webpack Plugins
*/
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const webpack = require('webpack');
/**
* Webpack Constants
*/
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
return {
/**
* Source map for Karma from the help of karma-sourcemap-loader & karma-webpack
*
* Do not change, leave as is or it wont work.
* See: https://github.com/webpack/karma-webpack#source-maps
*/
devtool: 'inline-source-map',
/**
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
/**
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['.ts', '.js'],
/**
* Make sure root is src
*/
modules: [helpers.root('src'), 'node_modules']
},
/**
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*
* 'use:' revered back to 'loader:' as a temp. workaround for #1188
* See: https://github.com/AngularClass/angular-starter/issues/1188#issuecomment-262872034
*/
module: {
rules: [
/**
* Source map loader support for *.js files
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
*
* See: https://github.com/webpack/source-map-loader
*/
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
/**
* These packages have problems with their sourcemaps
*/
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular')
]
},
/**
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
*
* See: https://github.com/s-panferov/awesome-typescript-loader
*/
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
query: {
/**
* Use inline sourcemaps for "karma-remap-coverage" reporter
*/
sourceMap: false,
inlineSourceMap: true,
compilerOptions: {
/**
* Remove TypeScript helpers to be injected
* below by DefinePlugin
*/
removeComments: true
}
},
},
'angular2-template-loader'
],
exclude: [/\.e2e\.ts$/]
},
/**
* Raw loader support for *.css files
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.css$/,
loader: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src/index.html')]
},
/**
* Raw loader support for *.scss files
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.scss$/,
loader: ['raw-loader', 'sass-loader'],
exclude: [helpers.root('src/index.html')]
},
/**
* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* Instruments JS files with Istanbul for subsequent code coverage reporting.
* Instrument only testing sources.
*
* See: https://github.com/deepsweet/istanbul-instrumenter-loader
*/
{
enforce: 'post',
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
include: helpers.root('src'),
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/
]
}
]
},
/**
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'}),
/**
* Plugin: DefinePlugin
* Description: Define free variables.
* Useful for having development builds with debug logging or adding global constants.
*
* Environment helpers
*
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
*
* NOTE: when adding more properties make sure you include them in custom-typings.d.ts
*/
new DefinePlugin({
'ENV': JSON.stringify(ENV),
'HMR': false,
'process.env': {
'ENV': JSON.stringify(ENV),
'NODE_ENV': JSON.stringify(ENV),
'HMR': false,
}
}),
/**
* Plugin: ContextReplacementPlugin
* Description: Provides context to Angular's use of System.import
*
* See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
* See: https://github.com/angular/angular/issues/11580
*/
new ContextReplacementPlugin(
/**
* The (\\|\/) piece accounts for path separators in *nix and Windows
*/
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('src'), // location of your src
{
/**
* your Angular Async Route paths relative to this root directory
*/
}
),
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({
debug: false,
options: {
/**
* legacy options go here
*/
}
}),
],
/**
* Disable performance hints
*
* See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
*/
performance: {
hints: false
},
/**
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: {
global: true,
process: false,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
}
还有其他方法可以导入Lodash吗？
干杯KH
我通过将lodash添加到karma.conf.js文件的部分来解决了这个问题。下面是一个使用[email protected]看起来应该是什么样子的例子。
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
files: [
'node_modules/lodash/lodash.min.js'
],
您可能还需要编辑tsconfig.spec.ts文件以包含下面的"esModuleInterop": true，这样您就可以使用import _ from 'lodash';而不是import * as _ from 'lodash';：
tsconfig.spec.ts
{
"extends": "../tsconfig.json",
"compilerOptions": {
"esModuleInterop": true
}
}
ref：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19153