Fatal编程技术网
  • angularjs/
  • Angularjs 如何配置karma和systemjs以运行由traceur传输到amd格式ES5模块的角度ES6测试

Angularjs 如何配置karma和systemjs以运行由traceur传输到amd格式ES5模块的角度ES6测试

angularjs gulp ecmascript-6

Angularjs 如何配置karma和systemjs以运行由traceur传输到amd格式ES5模块的角度ES6测试,angularjs,gulp,karma-runner,ecmascript-6,systemjs,Angularjs,Gulp,Karma Runner,Ecmascript 6,Systemjs,好吧，我的头撞在桌子上太久了，是时候寻求帮助了。 也许我离基地太远了，或者我就是看不见森林里的树木。请帮忙 我正在尝试使用gulp、Angular 1.3+、ES6、traceur、SystemJS、es_模块加载器和http服务器构建一个应用程序 到目前为止，该应用程序看起来不错，它可以从编译的文件夹位置编译、运行和托管，但我无法让Karma在我编译的项目中运行单个测试 以下是我的项目结构： gulpfile.js client/ - src - app/

好吧，我的头撞在桌子上太久了，是时候寻求帮助了。 也许我离基地太远了，或者我就是看不见森林里的树木。请帮忙

我正在尝试使用gulp、Angular 1.3+、ES6、traceur、SystemJS、es_模块加载器和http服务器构建一个应用程序

到目前为止，该应用程序看起来不错，它可以从编译的文件夹位置编译、运行和托管，但我无法让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，我能够使用amd包装器将所有es6代码传输到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和自定义下载） 
  • font
    、
    css
    和
    img
    文件夹是从多个来源收集的 
  • \u build/js
    文件夹与
    client/src/app文件夹
    几乎相同，只是
    index.html
    文件的级别提高了一级
  • html模板文件（
    *.tpl
    ）{一些人称这些部分为}都被编译成$templateCache模块 保存在
    \u build/js/modules/common/templates/templates.module.js
然后我使用http服务器提供它。
index.html
加载运行时基础结构 最后是
bootstrap.js
，它使用SystemJs从
/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>
在我构建应用程序并运行
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)
而
bootstrap.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']}
  }
});

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
文件夹获取测试
要在内存中编译并针对
\u build/js

中的预编译代码执行，很遗憾，我不会对此发表评论，我意识到这不是您想要的确切答案，但它可能会对您有所帮助

您是否考虑过使用JSPM来简化此过程，它可以处理您的所有库和依赖项，并且与karma JSPM结合使用，您将不需要声明所有这些路径。一些有用的链接：

我只是想附议这个问题，因为我使用了非常类似的设置（我使用的是babel、jasmine和phantomjs）看到了完全相同的问题。是的，谢谢，我已经研究jspm好几个月了。jspm最大的两个问题是它不能处理*.less transfilation，即使它可以处理es6 transfilation，而且它没有一个可靠的生产工作流…我所使用的生产工作流是，在开发过程中，您希望将未缩小的文件从它们所在的位置加载到浏览器活页中，但对于生产，至少对于angular，您需要使用ngannotate对js文件进行预处理。在绑定之前缩小文件，您还需要使用预绑定的供应商LIB（如果可用），或者切换配置以使用CDN版本。此外，您可能希望对主应用程序和供应商LIB使用单独的捆绑包，但这在sfx中是不可能的。 
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);
  }
);