我正在开发一个Angular2应用程序，目前我正处于Karma和Jasmine的测试阶段。我正在运行2个基本测试，一个工作正常，另一个发出此错误：
Uncaught ReferenceError: require is not defined
at test/routing.spec.es5.js:3
我的文件夹结构是：
ROOT
|__ app
| |__ app.ts
| |__ app.routes.ts
| |__ app.module.ts
|__ i18n
| |__ ...
|__ node_modules
| |__ ...
|__ test
| |__ routing.spec.js
| |__ basic.spec.js
|__ index.html
|__ karma.conf.js
|__ package.json
|__ index.html
|__ webpack.config.js
我已经尝试过安装Babel，但结果相同。这是我的基本文件：
的package.json
{
"name": "faas-portal",
"version": "1.0.0",
"description": "A blueprint app",
"scripts": {
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"watch": "npm run build -- --watch",
"server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base",
"start": "npm run server",
"test": "karma start",
"report": "lite-server -c bs-config.report.json"
},
"contributors": [
"Liviu"
],
"license": "MIT",
"devDependencies": {
"@types/core-js": "^0.9.32",
"@types/node": "^6.0.38",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"css-loader": "^0.23.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.0.2",
"raw-loader": "^0.5.1",
"to-string-loader": "^1.1.4",
"typescript": "^2.0.2",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "^2.0.1",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"angular2-jwt": "^0.1.24",
"angular2-recaptcha": "^0.3.2",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"dialog-polyfill": "^0.4.4",
"ie-shim": "^0.1.0",
"karma-babel-preprocessor": "^6.0.1",
"material-design-lite": "^1.2.1",
"ng2-translate": "^2.5.0",
"ng2-validators": "^1.5.1",
"protractor": "^4.0.9",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26"
},
"keywords": [
"test"
],
"repository": {
"type": "git",
"url": "git+https://github.com/angular/angular2-seed.git"
},
"bugs": {
"url": "https://github.com/angular/angular2-seed/issues"
},
"homepage": "https://github.com/angular/angular2-seed#readme",
"main": "webpack.config.js",
"author": ""
}
webpack.config.js
var webpack = require('webpack');
var path = require('path');
// Webpack Config
var webpackConfig = {
entry: {
'polyfills': './polyfills.browser.ts',
'vendor': './vendor.browser.ts',
'main': './main.browser.ts',
},
output: {
path: './dist',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
],
module: {
loaders: [
// .ts files for TypeScript
{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{ test: /\.html$/, loader: 'raw-loader' }
]
}
};
// Our Webpack Defaults
var defaultConfig = {
devtool: 'cheap-module-source-map',
cache: true,
debug: true,
output: {
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
resolve: {
//root: [ path.join(__dirname, 'src') ],
root: [ __dirname ],
extensions: ['', '.ts', '.js']//,
//alias : {
// module : path.join(__dirname, 'node_modules')
// }
},
devServer: {
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 }
},
node: {
global: 1,
crypto: 'empty',
module: 0,
Buffer: 0,
clearImmediate: 0,
setImmediate: 0
}
};
var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"outDir": "dist",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"types": [
"core-js",
"node"
]
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}
karma.conf.js
// Karma configuration
// Generated on Tue Nov 01 2016 14:55:46 GMT+0200 (GTB Standard Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
// RxJs.
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// paths loaded via module imports
// Angular itself
{ pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
{ pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
'node_modules/babel-polyfill/dist/polyfill.js',
'./test/basic.spec.js',
'./test/routing.spec.js'
],
// list of files to exclude
exclude: [
],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-babel-preprocessor'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
//'src/**/*.js': ['babel'],
'test/*.js': ['babel']
},
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
app.ts
import {Component, OnInit} from '@angular/core';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {Router} from '@angular/router';
import {AccountService} from './account/account-service';
@Component({
selector : 'app',
styleUrls: ['./app.css'],
templateUrl: './app.html',
providers : [AccountService]
})
export class AppComponent implements OnInit{
private hello: string = 'Hello';
goHome(){
this.router.navigate(['./home']);
}
constructor(private translate: TranslateService, private router: Router, public accountService: AccountService) {
translate.addLangs(["English", "Deutsch"]);
translate.setDefaultLang('English');
// if you want to use the language of the browser...
//let browserLang = translate.getBrowserLang();
//translate.use(browserLang.match(/en|de/) ? browserLang : 'en');
translate.use('English');
}
ngOnInit() {
// some functionality
}
}
routing.spec.js
import {AppComponent} from './app/app';
describe('App', () => {
beforeEach(function() {
this.app = new AppComponent();
});
it('should have hello property', function() {
expect(this.app.hello).toBe('Hello');
});
});
任何帮助都将受到高度赞赏。谢谢！