7

OK、これは私を夢中にさせているので、誰かが私を正しい方向に向けることができるかもしれません...

モジュールローダーとして最新のrequire.jsとjqueryを組み合わせて使用​​しています。data-main属性を使用して、 baseUrl. モジュールをロードしようbaseUrlとすると は無視され、require は と同じ場所からロードしようとしていますmain.js。

/js/main.js

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

/path/to/page.html

<script data-main="/js/main" src="/js/vendor/require-jquery.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});
</script>

期待される：

読み込みhttp://localhost:3000/js/vendor/bootstrap.jsとログhello world!

実際：

ロードしようとするとhttp://localhost:3000/js/bootstrap.js-- 失敗します :'(

data-mainとsrcrequire スクリプト タグの両方に、絶対パスではなく相対パスを使用してみました。私がすることは何もトリガーしていないようですbaseUrl。ドキュメントに何かが完全に欠けていますか？

4

2 に答える 2

10

問題は、require.js がスクリプトを非同期的にロードすることです (これが requirejs の背後にあるポイントです)。そのため、require()require をロードした直後に をスクリプト タグに追加すると、このスクリプトjs/main.jsはロードされる前に実行されます。

簡単な方法は、これらすべてを に含めるmain.jsか、新しいファイルを作成してこの部分を保持し、js/main からロードすることです。

/js/main.js

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

require(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});

- また -

/js/main.js

require.config({
    baseUrl: '/js/vendor/',
    deps: ['../boostrap']
});

/js/ブーストストラップ.js

define(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});

注require()がdefine()ブートストラップ ファイルに

于 2012-09-25T03:42:00.847 に答える
7

構成は非同期モードで実行されています。最初のrequire呼び出しが確立されたとき、構成はまだ適用されていません。ドキュメントによると：

ロード時にrequire.js別のスクリプトタグ（非同期属性付き）を挿入しますscripts/main.js

したがって、同期モードで構成を実行するだけです。

<script src="/js/vendor/require-jquery.js"></script>
<script src="/js/main.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
  $(function() {
    console.log('hello world!');
  });
});
</script>

詳細:メイン モジュールから構成を分離するためのパターン

于 2015-02-02T12:57:16.667 に答える