我已经对此问题进行了广泛的研究(我知道这是一个普遍的问题),但是找不到解决我特定问题的方法。
我有一个Angular 5项目,运行ng test
或npm test
会产生以下错误:
06 09 2018 10:19:32.062:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket bASgocks3foEAV_OAAAA with id 63164390
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: require
at gulpfile.js:20
这是我的karma.conf.js文件:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
files: [
'src/testing/**/*.js'
],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
这是我的gulpfile.js:
var gulp = require('gulp');
var run = require('gulp-run-command').default;
var webserver = require('gulp-webserver');
var http = require('http');
var lighthouse = require('lighthouse');
var chromeLauncher = require('chrome-launcher');
var Server = require('karma').Server;
var config = {
port: 1025,
context: '/account',
path: '/account/en_US/index.html',
min_scores: {
performance: 50,
accessibility: 70
}
};
(function (argList) {
var args = {},
opt = void 0,
curOpt = void 0;
argList.forEach(function (thisOpt) {
opt = thisOpt.trim().replace(/^-+/, '');
if (opt === thisOpt) {
// argument value
if (curOpt) {
args[curOpt] = opt;
}
curOpt = null;
} else {
// argument name
curOpt = opt;
if (curOpt.indexOf('=')) {
var optParts = curOpt.split('=');
args[optParts[0]] = optParts[1];
} else {
args[curOpt] = true;
}
}
});
config.port = +(args.port || config.port);
config.context = args.context || config.context;
config.path = args.path || config.path;
config.min_scores.accessibility = +(args.accessibility || config.min_scores.accessibility);
config.min_scores.performance = +(args.performance || config.min_scores.performance);
console.log(JSON.stringify(config, null, 4));
})(process.argv);
gulp.task('build', run('npm run build:prod'));
gulp.task('startServer', ['build'], function () {
var stream = gulp.src('dist').pipe(webserver({
port: config.port,
directoryListing: true,
path: config.context,
middleware: function middleware(req, res, next) {
if (/_kill_\/?/.test(req.url)) {
res.end();
stream.emit('kill');
}
next();
}
}));
});
gulp.task('stopServer', function (cb) {
http.request('http://localhost:' + config.port + '/_kill_').on('close', function () {
cb();
process.exit(0);
}).end();
});
gulp.task('lighthouse', ['startServer'], function (cb) {
chromeLauncher.launch({ chromeFlags: ['--headless'] }).then(function (chrome) {
lighthouse('http://localhost:' + config.port + config.path, { port: chrome.port }, // available options - https://github.com/GoogleChrome/lighthouse/#cli-options
{
"extends": "lighthouse:default",
"settings": {
"onlyCategories": ["performance", "accessibility"]
}
}).then(function (results) {
chrome.kill().then(function () {
var errors = [];
results.reportCategories.forEach(function (cat) {
console.log(cat.id, cat.score, '(' + config.min_scores[cat.id] + ')', cat.score > config.min_scores[cat.id]);
if (config.min_scores[cat.id] && cat.score < config.min_scores[cat.id]) {
errors.push('Failure: Score for ' + cat.id + ' (' + cat.score + ') is under the allowed score');
}
});
//output the html report using lighthouse's cli printer
require('./node_modules/lighthouse/lighthouse-cli/printer').write(results, 'html', 'lighthouse-report.html');
if (errors.length) {
cb(errors);
} else {
cb();
}
gulp.start('stopServer');
});
}).catch(function (e) {
cb(e);
gulp.start('stopServer');
});
});
});
gulp.task('default', ['lighthouse']);
package.json:
{
"name": "static-boilerplate",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "rm -rf ./dist && webpack",
"start": "webpack-dev-server --port=4200",
"test": "karma start --single-run"
},
"private": true,
"dependencies": {
"@angular/animations": "5.1.0",
"@angular/cdk": "5.0.1",
"@angular/common": "5.1.0",
"@angular/compiler": "5.1.0",
"@angular/core": "5.1.0",
"@angular/forms": "5.1.0",
"@angular/http": "5.1.0",
"@angular/material": "5.0.1",
"@angular/platform-browser": "5.1.0",
"@angular/platform-browser-dynamic": "5.1.0",
"@angular/router": "5.1.0",
"angular-in-memory-web-api": "^0.5.4",
"core-js": "2.4.1",
"http-proxy": "^1.17.0",
"intl": "1.2.5",
"lodash": "^4.17.10",
"postcss-custom-properties": "^7.0.0",
"rxjs": "5.5.2",
"zone.js": "0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "5.1.0",
"@angular/language-service": "5.1.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.117",
"autoprefixer": "6.5.3",
"circular-dependency-plugin": "3.0.0",
"codelyzer": "4.0.1",
"copy-webpack-plugin": "4.1.1",
"css-loader": "0.28.1",
"cssnano": "3.10.0",
"exports-loader": "0.6.3",
"file-loader": "1.1.5",
"gulp": "3.9.1",
"gulp-minify": "^3.1.0",
"gulp-run-command": "0.0.9",
"gulp-webserver": "0.9.1",
"html-webpack-plugin": "2.29.0",
"istanbul-instrumenter-loader": "2.0.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-browserify": "^5.3.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"karma-junit-reporter": "1.2.0",
"karma-phantomjs-launcher": "1.0.4",
"less-loader": "4.0.5",
"lighthouse": "2.5.0",
"link-media-html-webpack-plugin": "1.0.1",
"ngx-i18nsupport": "0.9.0",
"postcss-loader": "1.3.3",
"postcss-url": "5.1.2",
"protractor": "~5.1.2",
"raw-loader": "0.5.1",
"run-sequence": "2.2.0",
"sass-loader": "6.0.3",
"source-map-loader": "0.2.0",
"style-loader": "0.13.1",
"stylus-loader": "3.0.1",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "2.5.2",
"uglifyjs-webpack-plugin": "1.0.0",
"url-loader": "0.6.2",
"webpack": "~3.8.1",
"webpack-concat-plugin": "1.4.0",
"webpack-dev-server": "~2.9.3"
}
}
我知道可能有上百万个原因导致此错误,但是有关我的配置的任何事情都会发出警报吗?