karma.conf.js 文件自动排序？

Question

我有一个按功能排序的大型 angularjs 项目。我想设置单元测试，但在获取 karma.conf.js 文件排序设置时遇到问题。

我尝试指定一个简单的 glob 模式，如 **/*.js，但由于运行时它们包含在 Karma 中的顺序，我的许多模块未能加载。据我了解，它是按字母顺序排列的，第一个匹配项。

我可以通过执行以下操作手动确定顺序来解决此问题：

// list of files / patterns to load in the browser
files: [
  // External scripts
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-route/angular-route.js',

  // NOTE: ORDER IS IMPORTANT
  // Modules: load module first, then all controllers, services, etc
  'scripts/module1/module1.js',
  'scripts/module1/**/*.js',
  'scripts/module2/module2.js',
  'scripts/module2/**/*.js',

  // Load overall app module last
  'scripts/app.js',

  // Load mocks and tests
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

随着新模块的添加，随着时间的推移维护起来似乎会很麻烦。有没有办法自动解决排序问题？

注意：我想的一个可能的解决方案是将所有文件连接在一起，但我用谷歌搜索看是否其他人正在这样做，但没有找到示例。

Answer 1

我使用 browserify，我没有遇到任何问题，这是我的配置：

module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ['browserify', 'jasmine'],
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'dev/**/*Spec.js'
    ],
    exclude: [
    ],
    browserify: {
      watch: false,
      debug: true
    },
    preprocessors: {
      'dev/**/*Spec.js': ['browserify']
    },
    reporters: ['progress'],
    port: ****,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  });
};

Answer 2

我想您可能会在这里研究不同的解决方案，具体取决于您希望如何管理您的项目。

解决方案 n.1

使用AMD/RequireJS：不要一次加载所有模块，而是在需要时才加载它们。有时它可能无法满足您的需求，使项目变得过于复杂，因此请看下面。

注意：恕我直言，这是最优雅的解决方案和业力does support requireJS。

解决方案 n.2

创建一个命名空间，您可以在其中附加所有内容并在 DOM 准备就绪时启动它们（通常很快，但这实际上取决于您加载了多少脚本）

// module A
// Something like this should be fine
(function(){
  window.MyNamespace = window.MyNamespace || {};
  // append things to the namespace...
})();

// module B
(function(){
  window.MyNamespace = window.MyNamespace || {};
  // append things to the namespace...
})();

// This is very rough but it should give the idea
window.ondomready = MyNamespace.start;

注意：虽然这可能有效，但您必须 fiddle 对您的项目进行一些调整以相应地更改结构。

除非你真的讨厌 requireJS 和所有模块的东西，否则我会选择上面的那个。

解决方案 n.3

以编程方式订购您的 Karma 文件：我写过它 in this answer here。

注意：这是选项中较难维护的一个。

Answer 3

如果这样

  // Modules: load module first, then all controllers, services, etc
  'scripts/module1/module1.js',
  'scripts/module1/**/*.js',
  'scripts/module2/module2.js',
  'scripts/module2/**/*.js',

可以改为在模块声明文件上强制使用相同的文件命名约定，即这个

  // Modules: load module first, then all controllers, services, etc
  'scripts/module1/moduleDeclaration.js',
  'scripts/module1/**/*.js',
  'scripts/module2/moduleDeclaration.js',
  'scripts/module2/**/*.js',

那么你可以这样做

  // Modules: load module first, then all controllers, services, etc
  'scripts/**/moduleDeclaration.js',
  'scripts/**/*.js',

我做了类似的事情，尽管我确实打破了 moduleDeclaration 和 "the rest of it" 之间的接口和类型。

karma.conf.js 文件自动排序？

karma.conf.js automatic file ordering?

jasmine

phantomjs

angularjs

karma-runner

karma-jasmine

解决方案 n.1

解决方案 n.2

解决方案 n.3