在 package.json 上使用 SystemJS 和 Karma - 404答案

【问题标题】：Using SystemJS with Karma - 404 on package.json在 package.json 上使用 SystemJS 和 Karma - 404
【发布时间】：2017-07-10 18:08:46
【问题描述】：

问题：

尝试使用karma-systemjs 将 SystemJS 配置与 Karma 集成，但是 Karma 抱怨无法为每次导入找到 package.json 文件：

...
10 07 2017 13:38:15.107:WARN [web-server]: 404: /node_modules/angular-mocks/package.json
10 07 2017 13:38:15.380:WARN [web-server]: 404: /node_modules/moment/package.json
10 07 2017 13:38:15.382:WARN [web-server]: 404: /node_modules/angular/package.json
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
  Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/node_modules/angular-mocks/package.json
    Error loading http://localhost:9876/node_modules/angular-mocks/package.json
    Error loading build/js/app.spec.js

PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.945 secs / 0 secs)

以上已被截断，但输出上方还有几个缺少 package.json 警告。此外，这些错误仅与 Karma 有关，实际上应用程序本身在以下设置下运行良好。

依赖版本：

"karma": "1.7.0"
"karma-jasmine": "1.1.0"
"karma-systemjs": "0.16.0"
"systemjs": "0.19.47"

SystemJS 配置：

（引用自：https://github.com/systemjs/systemjs/issues/767#issuecomment-139515090）

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    '*': './node_modules/*',
  },
  packageConfigPaths:  ['./node_modules/*/package.json'],
  map: {
    'systemjs': './node_modules/systemjs/dist/system.js',
    'system-polyfills': './node_modules/systemjs/dist/system-polyfills.js',
    'babel': './node_modules/babel-core/browser.js',
    'angular-feature-flags': './node_modules/angular-feature-flags/dist/featureFlags.min.js',
    crypto: '@empty',
    fs: '@empty',
    stream: '@empty'
  }
});

业力配置：

module.exports = function (config) {
  "use strict";
  config.set({
    autoWatch: true,
    singleRun: false,
    port: 9876,
    frameworks: ["systemjs", "jasmine"],

    babelPreprocessor: {
      options: {
        compact: true
      }
    },

    files: [
      "node_modules/phantomjs-polyfill-object-assign/object-assign-polyfill.js",
      {pattern: "app/assets/images/**/*", watched: false, included: false, served: true},
      "build/**/*spec*.js"
    ],

    systemjs: {
      configFile: "./config.js",
      serveFiles: [
        './build/**/*.js'
      ]
    },
    browsers: ["PhantomJS"],
    reporters: ["spec"]
  });

};

【问题讨论】：

标签： angularjs npm karma-jasmine systemjs karma-systemjs

【解决方案1】：

karma-systemjs 应该读取您的 SystemJS 配置并自动告诉 karma 提供您告诉 SystemJS 的文件。但是，我查看了karma-systemjs 的代码，并没有看到任何处理packageConfigPaths 的规定。（还有 needs a new maintainer 项目，它不会激发信心。）因此，您应该在 files 配置中添加一个元素，例如：

{ pattern: "node_modules/**/package.json", included: false }

我建议使用** 的模式，这样您就可以自动处理像node_modules/@angular/core/package.json 这样的路径，它们的深度不止一层。

【讨论】：

尝试了您的建议，但问题仍然存在，错误输出没有变化。