jspm + karma + karma-jspm + plugin-typescript答案

【问题标题】：jspm + karma + karma-jspm + plugin-typescriptjspm + karma + karma-jspm + plugin-typescript
【发布时间】：2016-03-03 22:35:38
【问题描述】：

这篇文章是我在 https://github.com/frankwallis/plugin-typescript/issues/64 和 https://github.com/Workiva/karma-jspm/issues/112 的问题的 stackoverflow 转发

我们计划为 web ui 升级我们的团队堆栈，因此我们决定：

1) 使用 Karma 作为测试启动器，使用 jasmine 作为框架（之前使用 mocha 和自定义运行器）

2) 将 TypeScript 用于带有 UMD 或系统模块的源代码（之前是纯 Javascript）

3) 使用 SystemJS 作为模块加载器，允许使用不同的模块类型（CommonJS、AMD、system、ES6）而不会过热（之前需要 RequireJS）

另外：

1) 我们希望直接从 typescript 代码运行测试，无需预编译并将 JS 存储在磁盘上

2) 我们希望测试环境布局非常接近生产布局

3) 我们设置了 karma + jasmine + karma-typescript-preprocessor，它运行良好。但是我们希望不使用 JSPM/SystemJS 加载器，而在这种情况下，我们将确保我们的测试环境与使用 SystemJS 加载器的生产环境相匹配。因为另一方面，我们需要为仅测试编写一些自定义引导程序。

但是我们遇到了 karma + jspm + typescript-plugin (jspm) 的问题。

在 JSPM './config.js'中

    System.config({
      baseURL: "/", 
      "transpiler": false,
  "packages": {
    "src": {
        "main": "test.ts",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        },
        "*.js": {
          "loader": "ts"
        }
      }
    }
  },
  paths: {
    "npm:*": "jspm/npm/*",
    "github:*": "jspm/github/*"
  },

  map: {
    "ts": "github:frankwallis/plugin-typescript@2.2.3",
    "typescript": "npm:typescript@1.6.2",
    "github:frankwallis/plugin-typescript@2.2.3": {
      "typescript": "npm:typescript@1.6.2"
    }
  }
});

在 Karma 配置中：

// Karma configuration
// Generated on Mon Nov 30 2015 02:58:44 GMT+0500 (RTZ 4 (зима))

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jspm','jasmine'],
    plugins:[
        "karma-jspm",
        'karma-jasmine',
        'karma-chrome-launcher'
        ],
    jspm: {
        loadFiles: ['src/test.ts'], //we just try to check one simple test
        packages: "jspm/"
    }   ,
    proxies : { // avoid Karma's ./base virtual directory
        '/src/': '/base/src/',
        '/jspm/': '/base/jspm/'
    },
    reporters: ['progress'],
    port: 9876,
    browsers: ['Chrome']
  })
}

但是出了点问题：

30 11 2015 14:53:34.564:WARN [web-server]: 404: /jspm/github/frankwallis/pl
ugin-typescript@2.2.3
Chrome 46.0.2490 (Windows 10 0.0.0) ERROR: 'Potentially unhandled rejection [6]
Error: XHR error (404 Not Found) loading http://localhost:9876/jspm/github/frank
wallis/plugin-typescript@2.2.3
    at error (http://localhost:9876/base/jspm/system.src.js?6536115be64e0ff966e0
5546f7767676fa7c03d6:1020:16)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm/sy
stem.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1028:13)'

我们检查了 url 是否有效：例如 /jspm/github/frankwallis/plugin-typescript@2.2.3\utils.js 由 Karma 提供良好服务。我不明白为什么它会尝试加载整个打字稿插件目录。

所以我们有疑问：

1) 是错误还是我们理解/配置失败

2) 如果是我们的失败 - 如何解决？

3) 可能我们选择不正确的如何使用 Karma + JSPM + Typescript 进行测试？

任何建议都会有所帮助。

【问题讨论】：

标签： javascript typescript karma-runner jspm systemjs

【解决方案1】：

我使用了karma-uiuxengineering-jspm 而不是karma-jspm。

这是一个分支，当时似乎解决了我的问题，并且支持 JSPM 0.17-beta。

该 repo 还包含一些带有测试环境的 angular2 和 typescript（使用 JSPM）种子项目。它真的帮助我建立了我的项目。

【讨论】：

【解决方案2】：

自己发现错误："defaultJSExtensions": true, 不在 .\config.js 中

【讨论】：