33

私はRequireJSが初めてです。Knockout.js で多数のカスタム バインディングを作成しており、モジュールを使用してそれらを分割したいと考えています。

現時点での私のコードのレイアウトは次のとおりです。

/
  default.html
  js
    code.js
    require-config.js 
    lib
      /require.js
      bridge
        bridge.js
        bindings1.js
        bindings2.js
        bindings3.js

bridge.js を default.html からロードし、それをすべてのバインディング ファイルにロードしたいと考えています。require 関数を使用して、またはインライン js を使用して bridge.js をロードしようとしました。

私のrequire-configはとてもシンプルです:

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

bridge.js で、相対パスを使用してファイルをロードする際に問題が発生しています。私は試した：

require(['./bindings1', './bindings2', './bindings3'], function () {
    console.log('loaded');
});

しかし、これはパス baseUrl + 'bindings1.js' を使用することになります。bridge.js でさまざまな反復を試しました。私が持っていた唯一の成功は、パス全体を書いた場合です:

require(['js/bridge/bindings1', 'js/bridge/bindings2', 'js/bridge/bindings3'], function () {
    console.log('loaded');
});

しかし、それは私が望むものではありません。これはかなり基本的な使用例のように思えますが、相対パスがどのように機能するかを誤解している可能性があります。

ありがとう

4

2 に答える 2

30

相対 ID は、ID が解決されるモジュール ID に対して相対的に解決されます。AMD 仕様のセクションを参照してくださいmodule id format。

相対依存関係 ID を正しいコンテキスト/スコープに組み込むには、次の 2 つの方法があります。

コールの定義

define 呼び出しは、「モジュール」の開始/定義です。呼び出し内で要求されるすべての依存関係は、define()そのモジュールの ID 内/関連するようにスコープされます。例：

// does not matter what the file name is.
define(
    'hand/named/module'
    , ['./child']
    , factoryFunction
)

また

// inside of 'hand/named/module.js' file.
define(
    ['./child']
    , factoryFunction
)

上記のどちらの場合でも./child、呼び出しによって定義されたモジュール ID に対して解決されdefine()ます。どちらの場合もモジュール ID は でhand/named/moduleあり、./child解決されるのはhand/named/child(+ '.js' は明らかに、それを取得するときです)

「スコープ」が必要

オーバーライドすることで、呼び出しのスコープをrequireグローバルからローカルに変更できます。実際には名前をオーバーライド/保持する必要はありませんrequire。それは、それが何をするかの意味です。require 機能は、特定のモジュールに対して「ローカル」になります。

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(myLocalRequire){
        require('./child', function(){
            // outcome A
        })
        myLocalRequire('./child', function(){
            // outcome B
        })
    }
)

結果Aでは、「グローバル」requireを引き続き使用します-親スコープにアタッチされたもの。baseURL ./child+ '/child' に解決されます

結果 B はローカル スコープであり、モジュール ID に関連付けられてhand/named/moduleいるため、次のように./child解決されます。hand/named/child

@CristiPufuが推奨するのはrequire、その関数のスコープに対してのみローカルになるローカルオブジェクトでグローバル変数をオーバーライドすることです。

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(require){
        return function(){
            // here we have access only to "local" require,
            // since in the function declaration you decided to
            // override the 'require' variable with new object.
            // All code outside of this function will use global require.
            require('./child', function(){
                // outcome B
            })
        }
    }
)

私の好みは、すべての相対リソースをdefine呼び出し内に置くことです。それらが何に関連しているかが明確であるため、それらを明示的かつ意味のあるものにします。

于 2013-01-29T18:32:53.660 に答える
26

必要な構成で「パッケージ」を使用します。ここにあなたの質問のトピックに対する有効な答えがあります

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

パッケージ内では、相対パスを使用できます。

于 2014-03-21T16:06:11.023 に答える