将AngularJS应用中的模块文件包含到Karma的RequireJS配置文件中

Include file with module from AngularJS app into RequireJS config file in Karma

本文关键字：Karma 配置文件 RequireJS 模块 AngularJS 应用 文件包      更新时间：2023-09-26

我们知道，当在配置文件中使用RequireJS时，我们必须定义'paths'和'shim'。当编写测试(Karma, Jasmine)时，我们需要为RequireJS创建一个额外的配置文件，并重新定义相同的数据。

我尝试提取公共部分并动态加载它们。在Angular JS应用程序中，一切工作没有问题，但在测试中，我总是有错误'404'。让我们从头开始。简单结构示例:

.
|-- newApp
|   |-- app
|   |   `-- app.require.js
|   |-- newApp.require.js
|   `-- index.html
`-- test
    |-- test.karma.js
    `-- test.require.js

index.html load RequireJS配置文件

<script data-main="newApp.require.js" src="bower_components/requirejs/require.js"></script>

newApp.require.js init RequireJS

require([
    'app/app.require'
], function (appRequire) {
    "use strict";
    require.config({
        baseUrl: 'app',
        paths: appRequire.paths,
        shim: appRequire.shim,
        deps: [
            'NewAppBootstrap'
        ]
    });
});

app.require.js Module/object with paths and shim

define([
    'some/others/components.require'
], function (componentsRequire) {
    "use strict";
    var appRequire = {
        'NewApp': 'app.module',
        'NewAppBootstrap': 'app.bootstrap',
        'NewAppRoute': 'app.routes'
    };
    var vendorRequire = {
        'jQuery': {
            exports: '$'
        },
        'angular': {
            exports: 'angular'
        }
    };
    return {
        paths: Object.assign(
            appRequire,
            componentsRequire
        ),
        shim: vendorRequire
    };
});

到目前为止一切正常。现在我想文件app.require.js加载到test.require.js。问题开始了……

test.require.js 

var TEST_REGEXP = /(spec|test)'.js$/i;
var allTestFiles = [];
Object.keys(window.__karma__.files).forEach(function (file) {
    'use strict';
    if (TEST_REGEXP.test(file)) {
        var normalizedTestModule = file.replace(/^'/base'/|'.js$/g, '');
        allTestFiles.push(normalizedTestModule);
    }
});
require([
    'app/app.require'
], function (appRequire) {
    "use strict";
    require.config({
        baseUrl: '/base/newApp',
        waitSeconds: 200,
        paths: appRequire.paths,
        shim: appRequire.shim,
        deps: allTestFiles,
        callback: window.__karma__.start
    });
});

不幸的是，我仍然有错误:

WARN [web-server]: 404: /app/app.require.js
PhantomJS 2.1.1 (Linux 0.0.0) ERROR: 'There is no timestamp for app/app.require.js!'
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: Script error for "app/app.require"
  http://requirejs.org/docs/errors.html#scripterror at node_modules/requirejs/require.js:143

我尝试了不同的路径，但仍然一无所获。有人知道怎么加载这个文件吗?是否有可能在这个地方加载文件?如有任何建议，我将不胜感激。

当您的代码碰到这个require调用时:

require([
    'app/app.require'
],

没有有效的requires配置，并且没有使用data-main，所以默认情况下，requires将包含加载requires的HTML页面的目录作为baseUrl(参见文档)。由于index.html位于根，那么RequireJS将您的模块名称解析为/app/app.require.js并且没有找到它。

你可以使用一个完整的路径来解决这个问题:

require([
    'base/newApp/app/app.require'
],

或者如果其他代码稍后将尝试访问与app/app.require相同的模块，那么您应该在第一次调用require之前进行最小配置:

require.config({
  baseUrl: '/base/newApp',
});

多次调用require.config是完全可以的。后续调用将覆盖原子值(如baseUrl)和可以合并的边缘值。(后者的一个例子是paths。如果第一次调用为模块foo设置了paths，第二次调用为模块bar设置了paths，那么结果配置将为foo和bar都设置了paths。

相关文章：