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

我认为您可以在此处查看不同的解决方案，具体取决于您希望如何管理项目。

解决方案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;

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

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

解决方案n.3

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

注意：这是不太可能的选项。

Answer 2

如果这个

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

可以在模块声明文件上强制执行相同的filenaming约定，为此

  // 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和＆＃34;其余部分＆＃34;之间的类型。

Answer 3

我使用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
  });
};

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

3 个答案:

解决方案n.1

解决方案n.2

解决方案n.3