AngularJSアプリのモジュールを含むファイルをKarmaのRequireJS構成ファイルにインクルードします

FpDev

ご存知のように、構成ファイルでRequireJSを使用する場合は、「パス」と「シム」を定義する必要があります。テスト(Karma、Jasmine)を作成するときは、RequireJSの追加の構成ファイルを作成し、同じデータを再定義する必要があります。

共通部分を抽出して動的にロードしようとしています。Angular JSアプリケーションでは、すべてが問題なく動作しますが、テストでは常にエラー「404」が発生します。しかし、始めましょう。単純な構造例:

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

index.htmlRequireJS構成ファイルをロードします

<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モジュール/パスとシムを持つオブジェクト

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'
],

RequireJS構成は有効でdata-mainはなく、使用されないため、デフォルトでは、RequireJSはRequireJSをロードする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次のようになります。最初の呼び出しpathsがモジュールfooにaを設定し、2番目の呼び出しpathsがモジュールbara設定する場合、結果の構成はとpathsの両方にfooなりbarます。)

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リポジトリに.shファイルとしてすでに含まれているイメージをビルドするためのスクリプトを実行するように.travis.ymlファイルを構成する方法

分類Dev

haskellファイルのモジュール宣言を追加するようにvimを構成します

分類Dev

Javaファイルを含むディレクトリをintellijのJavaモジュールに変換する

分類Dev

Prestashop:他のクラスを含むファイルに含まれるモジュールクラスをオーバーライドする方法は?

分類Dev

複数のタイプセーフ構成ファイルをyarnクラスターモードアプリケーションに渡す

分類Dev

角度ファイルアップロードモジュールの特定のファイル拡張子のみをクリック可能にする

分類Dev

.confを含むデーモンOpenVPN構成ファイル?

分類Dev

ファイルを作成して、そのファイルに含まれるすべてのモジュールをインポートします

分類Dev

インストールされたアプリの.debファイルのみをdebianリポジトリから取得して、依存関係を含むオフラインインストール用にキャッシュします

分類Dev

ドメインを含む巨大なテキストファイルをクリーンアップします

分類Dev

同じ構造の JSON ファイルをリストを含む JSON ファイルにマージする

分類Dev

スタックのビルド/インストールを取得してリソースファイル(構成、イメージなど)を含める方法

分類Dev

document.writeを含む外部JavaScriptファイルをAngularJSアプリにロードします

分類Dev

リクエストモジュールを使用してファイルをダウンロードすると、空のファイルが作成されます

分類Dev

モジュールのPHPコードを個別のインクルードファイルに分割する

分類Dev

.proファイル内の不明なモジュール-androidextrasモジュールが含まれているアプリをビルドできません

分類Dev

javascriptモジュールをインポートし、ロールアップを使用して単一のjsファイルにバンドルする方法は?

分類Dev

Foreverモジュール[node.js]を使用したJSON構成ファイルのkillSignalオプション

分類Dev

さびで「別のファイルを使用する」方法は?ハイフンを含むモジュール

分類Dev

webpackはブラウザとノード用に別々のスクリプトファイルとモジュールファイルを出力できますか?

分類Dev

モジュール間でMavenプラグインの共通構成を[構成ファイルなどで]共有する方法はありますか?

分類Dev

Pythonリクエストモジュールを使用したファイルのアップロード

分類Dev

Javaプロジェクトのrpmビルドおよびインストール用のスペックファイルを構成します

分類Dev

R-別のRmdファイルを編成するコードを含むRmdファイルを編成するときのエラー(「セットアップ」チャンク名が重複しています)

分類Dev

C#コンソールアプリのビルドはXML構成ファイルを編集しており、起動時にアプリケーションをクラッシュさせます

分類Dev

Node.jsの使用保持するキーを含む配列またはオブジェクトを含む個別の構成ファイルからJSONドキュメントをフィルタリングするにはどうすればよいですか?

分類Dev

百万の値を含むcsvファイルをmysqlの特定の列にアップロードします

分類Dev

Flaskアプリをいくつかのファイルに分割します。モジュールのインポートに関する問題

分類Dev

cups-lpd経由のcups-pdfは、コンテンツなしでプリンター構成を含むPDFファイルを作成します

Related 関連記事

  1. 1

    リポジトリに.shファイルとしてすでに含まれているイメージをビルドするためのスクリプトを実行するように.travis.ymlファイルを構成する方法

  2. 2

    haskellファイルのモジュール宣言を追加するようにvimを構成します

  3. 3

    Javaファイルを含むディレクトリをintellijのJavaモジュールに変換する

  4. 4

    Prestashop:他のクラスを含むファイルに含まれるモジュールクラスをオーバーライドする方法は?

  5. 5

    複数のタイプセーフ構成ファイルをyarnクラスターモードアプリケーションに渡す

  6. 6

    角度ファイルアップロードモジュールの特定のファイル拡張子のみをクリック可能にする

  7. 7

    .confを含むデーモンOpenVPN構成ファイル?

  8. 8

    ファイルを作成して、そのファイルに含まれるすべてのモジュールをインポートします

  9. 9

    インストールされたアプリの.debファイルのみをdebianリポジトリから取得して、依存関係を含むオフラインインストール用にキャッシュします

  10. 10

    ドメインを含む巨大なテキストファイルをクリーンアップします

  11. 11

    同じ構造の JSON ファイルをリストを含む JSON ファイルにマージする

  12. 12

    スタックのビルド/インストールを取得してリソースファイル(構成、イメージなど)を含める方法

  13. 13

    document.writeを含む外部JavaScriptファイルをAngularJSアプリにロードします

  14. 14

    リクエストモジュールを使用してファイルをダウンロードすると、空のファイルが作成されます

  15. 15

    モジュールのPHPコードを個別のインクルードファイルに分割する

  16. 16

    .proファイル内の不明なモジュール-androidextrasモジュールが含まれているアプリをビルドできません

  17. 17

    javascriptモジュールをインポートし、ロールアップを使用して単一のjsファイルにバンドルする方法は?

  18. 18

    Foreverモジュール[node.js]を使用したJSON構成ファイルのkillSignalオプション

  19. 19

    さびで「別のファイルを使用する」方法は?ハイフンを含むモジュール

  20. 20

    webpackはブラウザとノード用に別々のスクリプトファイルとモジュールファイルを出力できますか?

  21. 21

    モジュール間でMavenプラグインの共通構成を[構成ファイルなどで]共有する方法はありますか?

  22. 22

    Pythonリクエストモジュールを使用したファイルのアップロード

  23. 23

    Javaプロジェクトのrpmビルドおよびインストール用のスペックファイルを構成します

  24. 24

    R-別のRmdファイルを編成するコードを含むRmdファイルを編成するときのエラー(「セットアップ」チャンク名が重複しています)

  25. 25

    C#コンソールアプリのビルドはXML構成ファイルを編集しており、起動時にアプリケーションをクラッシュさせます

  26. 26

    Node.jsの使用保持するキーを含む配列またはオブジェクトを含む個別の構成ファイルからJSONドキュメントをフィルタリングするにはどうすればよいですか?

  27. 27

    百万の値を含むcsvファイルをmysqlの特定の列にアップロードします

  28. 28

    Flaskアプリをいくつかのファイルに分割します。モジュールのインポートに関する問題

  29. 29

    cups-lpd経由のcups-pdfは、コンテンツなしでプリンター構成を含むPDFファイルを作成します

ホットタグ

アーカイブ