好吧，我的头撞在桌子上太久了，是时候寻求帮助了。也许我离基地很远，或者我只是看不到森林里的树木。请帮忙。
我正在尝试使用 gulp、Angular 1.3+、ES6、traceur、SystemJS、es_module_loader 和 http-server 构建应用程序。
到目前为止，该应用程序看起来不错，它可以从已编译的文件夹位置编译、运行和托管，但我无法让 Karma 在我的编译项目中运行单个测试。
这是我的项目结构：
gulpfile.js
client/
- src
- app/
- bootstrap.js
- system.config.js
- index.html
- modules/
- app.module.es6
- AppRouter.es6
- app.less
- common/
- common.module.es6
- masterTemplate/
- MasterTemplateController.es6
- MasterTemplateController.spec.es6
- masterTemplate.tpl
- masterTemplate.less
- home/
- home.module.es6
- home.less
- greeting/
- GreetingController.es6
- GreetingController.spec.es6
- greeting.less
- greeting.tpl
...
使用 gulp 和 traceur 我能够将所有 es6 代码转换为带有 amd 包装器的 es5 模块。编译后的工件放置在构建文件夹中，如下所示：
_build/
- css/
- fonts/
- img/
- js/
- lib/...
- modules/
- common/...
- home/
- greeting/
- GreetingController.js
- home.module.js
- app.module.js
- AppRouter.js
- mock.app.module.js
- bootstrap.js
- system.config.js
- index.html
编译后的布局与源布局不完全相同，但非常接近：
- 供应商库位于
lib文件夹中，来自 3 个不同的地方（npm、bower 和自定义下载）。 fonts和文件css夹img是从多个来源收集的 。- 该
_build/js文件夹几乎与 相同client/src/app folder，除了index.html文件是上一级的。 - html 模板文件 (
*.tpl) {some call these partials} 全部编译成 $templateCache 模块保存在_build/js/modules/common/templates/templates.module.js
然后我使用 http-server 提供它。index.html加载运行时基础架构，最后bootstrap.js加载/modules/.
<!doctype html>
<head>
<title>App</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/css/app.css">
<script src="/js/lib/traceur-runtime.js"></script>
<script src="/js/lib/system.js"></script>
<script src="/js/system.config.js"></script>
</head>
<body>
<div ui-view="main" class="root-view"></div>
<script src="/js/bootstrap.js"></script>
</body>
</html>
这很好用。一切都按应有的方式加载和呈现。
现在我去测试它......因为我正在使用 SystemJs 加载所有依赖项（import在每个模块和后续 src 文件中使用标识）我需要使用karma-systemjs来帮助 karma 查找和加载那些相同的文件。
这是我的karma.config.js，存储在client/src/tests/karma/karma.config.js
module.exports = function (config) {
config.set({
basePath: '../../../../,
urlRoot: '',
hostname: 'localhost',
frameworks: [ 'systemjs','mocha','chai','chai-as-promised','sinon-chai'],
plugins: [
'karma-mocha',
'karma-chai',
'karma-chai-plugins',
'karma-systemjs',
'karma-traceur-preprocessor',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-spec-reporter',
'karma-junit-reporter',
'karma-failed-reporter'
],
systemjs: {
configFile: '_build/js/system.config.js',
files: [
'_build/js/lib/*.js',
'_build/js/modules/**/*.js',
'client/src/app/**/*Spec.es6'
],
config: {
transpiler: 'traceur',
paths: {
'angular': '_build/js/lib/angular.min.js',
'angular-animate': '_build/js/lib/angular-animate.min.js',
'angular-messages': '_build/js/lib/angular-messages.min.js',
'angular-aria': '_build/js/lib/angular-aria.min.js',
'angular-resource': '_build/js/lib/angular-resource.min.js',
'angular-cookies': '_build/js/lib/angular-cookies.min.js',
'angular-storage': '_build/js/lib/angular-storage.min.js',
'angular-material': '_build/js/lib/angular-material.min.js',
'angular-mocks': '_build/js/lib/angular-mocks.js',
'angular-ui-router': '_build/js/lib/angular-ui-router.min.js',
'statehelper': '_build/js/lib/statehelper.min.js',
}
},
testFileSuffix: '.spec.js'
},
preprocessors: {
'client/src/app/**/*.spec.es6': ['traceur'] // pre-compile tests
},
traceurPreprocessor: {
options: {
modules: 'amd',
},
},
client: {
mocha: {
reporter: 'html',
ui: 'bdd'
}
},
reporters: ['junit', 'spec', 'failed'],
reportSlowerThan: 1000,
junitReporter: {
outputFile: 'reports/unit-test-results.xml',
suite: ''
},
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: [
'Chrome'
],
captureTimeout: 10000,
port: 9876,
runnerPort: 9100,
singleRun: true,
background: false
});
};
在我构建应用程序并运行后，gulp karma我收到了这个非常有用的错误消息：
ERROR [karma]: Uncaught TypeError: Illegal module name "/base/client/src/app/modules/home/greeting/GreetingController.spec"
at http://localhost:9876/base/node_modules/es6-module-loader/dist/es6-module-loader.src.js?3aac9167d6f21486de90ab673ff41c414843e2b4:2667
Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.399 secs / 0 secs)
[02:17:59] 'karma' errored after 1.81 s
[02:17:59] Error: 1
at formatError (/Users/kpburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp.<anonymous> (/Users/kpburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:195:15)
at Gulp.emit (events.js:107:17)
at Gulp.Orchestrator._emitTaskDone (/Users/kpburson/projects/ver-client/node_modules/orchestrator/index.js:264:8)
at /Users/kpburson/projects/ver-client/node_modules/orchestrator/index.js:275:23
at finish (/Users/kpburson/projects/ver-client/node_modules/orchestrator/lib/runTask.js:21:8)
at cb (/Users/kpburson/projects/ver-client/node_modules/orchestrator/lib/runTask.js:29:3)
at removeAllListeners (/Users/kpburson/projects/ver-client/node_modules/karma/lib/server.js:220:7)
at Server.<anonymous> (/Users/kpburson/projects/ver-client/node_modules/karma/lib/server.js:231:9)
at Server.g (events.js:199:16)
该system.config.js文件是：
System.config({
baseURL: '/js/',
paths: {
'angular': '/js/lib/angular.js',
'angular-animate': '/js/lib/angular-animate.js',
'angular-aria': '/js/lib/angular-aria.js',
'angular-cookies': '/js/lib/angular-cookies.js',
'angular-material': '/js/lib/angular-material.js',
'angular-messages': '/js/lib/angular-messages.js',
'angular-mocks': '/js/lib/angular-mocks.js',
'angular-resource': '/js/lib/angular-resource.js',
'angular-storage': '/js/lib/angular-storage.js',
'angular-ui-router':'/js/lib/angular-ui-router.js',
'statehelper': '/js/lib/statehelper.js'
},
meta: {
'angular': {format: 'global', exports: 'angular'},
'angular-ui-router': {format: 'global', deps: ['angular']},
'statehelper': {format: 'global', deps: ['angular', 'angular-ui-router']}
}
});
bootstrap.js文件是：
System.import('app.module').then(
function (a) {
angular.element(document).ready(
function () {
angular.bootstrap(document, ['app']);
}
);
},
function (a, b, c) {
console.out('\na:', a, '\nb:', b, '\nc:', c);
}
);
我已经黔驴技穷了。请帮我弄清楚如何从client/src文件夹中获取测试以在内存中编译并针对_build/js.