requirejsモジュール/パッケージを備えた相対パス

StackOverflow https://stackoverflow.com/questions/9302284

  •  25-10-2019
  •  | 
  •  

質問

私はJSを要求するのがかなり新しい、少し問題に遭遇しています。 requirejsを使用してBackbone上に構築された小さなフレームワークを作成しましたが、さまざまなプロジェクトで再利用できるようにしたいと考えています。したがって、いくつかの検索で、私は必要とする必要があることを学びました。これは私が探していたもののようでした。私は本質的に次のようなアプリを起動するためのmain.jsファイルを持っています：

require.config({
  packages: ['framework']
});

require(['framework'], function(framework) {
  framework.createDash();
});

次に、main.jsと同じディレクトリに、「フレームワーク」と呼ばれる別のディレクトリがあります。

define(function(require, exports, module) {
  exports.createDash = function(dash, element) {
    require(['dash/dash.model', 'dash/dash.view'], function(DashModel, DashView) {
      return new DashView({
        model: new DashModel(dash),
        el: element ? element : window
      });
    });
  };
});

検索で見つけました このページ これは、「必要」の引数をサブモジュールにスコープする必要があることを示しています。しかし、私が物事を要求しようとするとき、それらは私の元のmain.jsにまだ関連しています。私は多くのことを試してみましたが、何時間も検索しました。パッケージ内のcalls内に呼び出しを必要/定義する方法はありますか？

役に立ちましたか？

解決

サブモジュールを要求構成のパッケージとして定義する必要があります。

require.config({
  packages: [
    { name: 'packagename',
      location: 'path/to/your/package/root',  // default 'packagename'
      main: 'scriptfileToLoad'                // default 'main' 
    }]
  ... some other stuff ...
});

モジュールをロードするには、要件で「パッケージネーム」を使用するだけです。

define(['jquery', 'packagename'], function($, MyPackage) {
  MyPackage.useIt()
});

パッケージでは、使用する必要があります ./ サブモジュールに対してファイルをロードするプレフィックス：

define(['globalDependency', './myLocalFile'], function(Asdf, LocalFile) {
  LocalFile.finallyLoaded();
});

便利なショートカットがあります：パッケージ名があなたの場所に等しく、メインファイルが「main.js」と呼ばれる場合、これを置き換えることができます

  packages: [
    { name: 'packagename',
      location: 'packagename',
      main: 'main'
    }]

これに：

  packages: ['packagename']

私が見る限り、あなたはすでにパッケージを定義しようとしましたが、./プレフィックスも使用しましたか？このプレフィックスがないと、グローバルルートパス内のファイルを見つけようとします。そしてパッケージなしで、 ./ 相対パスはグローバルルートパスと同じであるため、役に立たないでしょう。


乾杯

他のヒント

私は自分の質問に対する答えと解決策を見つけました（それらは明らかに同じではありませんでした）。将来他の誰かを助けることができる場合に備えて、ここに投稿します。

本質的に私が望んでいたのは、それ自体のコンテキスト内で私のフレームワークをロードすることでした。下にコンテキストオプションが見つかりました 構成セクション requireのウェブサイトと それを使用する方法の例. 。もともと私は次のようなことをすることでこれを試しました：

var req = require.config({
    baseUrl: 'framework',
    context: 'framework',

    paths: {
        jQuery: 'lib/jquery/jquery-1.7.min.js',
        Underscore: 'lib/underscore/underscore.min.js',
        Backbone: 'lib/backbone/backbone.min.js',
        etc...
    }
});

req(['main'], function() {});

これには2つの問題がありました。まず、私の「req」変数はフレームワークの外で定義されていましたが、フレームワークがそれ自身のパスを定義することを望んでいました。第二に、フレームワークの外側のファイルにフレームワーク内のファイルが必要になる場合は、たとえば「jQuery」が必要になります。必要なので、ファイルが見つかりませんでした。

私がやったことは、私のフレームワークのmain.jsを定義して、次のように見えることでした。

var paths = {
    jQuery: 'lib/jquery/jquery-1.7.min.js',
    Underscore: 'lib/underscore/underscore.min.js',
    Backbone: 'lib/backbone/backbone.min.js',
    etc...
};

define(function() {
    var exports = {};

    exports.initialize = function(baseUrl, overridePaths, callback) {
        if(!overridePaths) {
        overridePaths = {};
        }
        if(baseUrl && baseUrl[baseUrl.length - 1] != '/') {
            baseUrl = baseUrl + '/';
        }

        var fullpaths = {};
        for(var path in paths) {
            // Don't add baseUrl to anything that looks like a full URL like 'http://...' or anything that begins with a forward slash
            if(paths[path].match(/^(?:.*:\/\/|\/)/)) {
                fullpaths[path] = paths[path];
            }
            else {
                fullpaths[path] = baseUrl + paths[path];
            }
        }

        var config = {paths: fullpaths};
        for(var pathName in overridePaths) {
            config.paths[pathName] = overridePaths[pathName];
        }
        require.config(config);

        // Do anything else you need to do such as defining more functions for exports

        if(callback) {
            callback();
        }
    }

    return exports;
});

そして、私のプロジェクトのmain.jsファイルで私はこれを行います：

require(['framework/main'], function(framework) {
    // NOTE: This setTimeout() call is used because, for whatever reason, if you make
    //       a 'require' call in here or in the framework without it, it will just hang
    //       and never actually go fetch the files in the browser. There's probably a
    //       better way to handle this, but I don't know what it is.
    setTimeout(function() {
        framework.initialize('framework', null, function() {
            // Do stuff here
        }
    }, 0);
});

これにより、Frameworkのinitialize（）メソッドの「baseurl」のメソッドに渡されるものはすべて、フレームワークがフォワードスラッシュまたは「何か：//」で開始しないパスを定義するパスにそれを準備します。これにより、フレームワークを使用してパッケージが「jQuery」などのものをオーバーライドできます。

これは私のために機能し、Aを追加しました "./" モジュール名のプレフィックス：

define(function (require, exports, module) {
    exports.createDash = function (dash, element) {
        require([ './dash/dash.model', './dash/dash.view' ], function (DashModel, DashView) {
            return new DashView({
                model : new DashModel(dash),
                el : element ? element : window
            });
        });
    };
});

Main.js（または他のパッケージメイン）が特定の名前で呼び出されると仮定して、サブモジュールをData-Mainまたは外部フレームワークから直接使用できるようにするために私にとってうまく機能したプロセスは、使用することでした。 var baseUrl = require.toUrl('packageName') + '/../' のプレフィックスとして require.config({ paths: { ... } }) 構成ファイル。例えば：

var music21Base = require.toUrl('music21') + '/../';

require.config({ paths: {
                          'jquery': music21Base + 'ext/jquery/jquery.2.1.10.min';
                          'subModuleLoader': music21Base + 'src/subModuleLoader';
                         }  });

の設定 context: "xxx" 通常のモジュールを呼び出すために正常に動作しました ./modName しかし、は機能しませんでした paths 私のための議論。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top