37

RequireJS のドキュメントによると、古いバージョンの IE をサポートするには、構成する必要がありますenforceDefine: true。

したがって、Internet Explorer をサポートし、読み込みエラーをキャッチし、define() の直接呼び出しまたは shim 構成のいずれかを使用してモジュラー コードを使用する場合は、常に enforceDefine を true に設定してください。例については、次のセクションを参照してください。

注: enforceDefine: true を設定し、data-main="" を使用してメイン JS モジュールをロードする場合、そのメイン JS モジュールは必要なコードをロードするために require() ではなく define() を呼び出す必要があります。メインの JS モジュールは引き続き require/requirejs を呼び出して構成値を設定できますが、モジュールをロードするには define() を使用する必要があります。

Twitter Bootstrap は AMD モジュールではないため、動作させるには shim する必要があります。これが私の設定方法です。

<script type="text/javascript">
    var require = {
        paths: {
            "bootstrap": "../bootstrap",
            "jquery": "../jquery-1.8.2"
        },
        shim: {
            "bootstrap": ["jquery"]
        },
        enforceDefine: true
    };
</script>

後でモジュールが依存関係としてブートストラップを必要とする場合、エラー メッセージが表示されます。

Error: No define call for bootstrap

http://requirejs.org/docs/errors.html#nodefine

ドキュメントを正しく理解していれば、enforceDefineシムを無視する必要がありますが、そうではありません。

ここで何が間違っていますか？

4

4 に答える 4

37

ドキュメントによると、「スクリプトが、読み込みをチェックできるグローバル文字列プロパティを指定した shim 構成の一部であり、そのチェックが失敗した」場合にエラーがスローされます。

これを修正するには、スクリプトが正常にロードされたかどうかを RequireJS が確認できるように、shim 構成に exports 値を追加する必要があります。Bootstrap の場合、Bootstrap は適切なグローバル変数を jquery プラグインの束だけを「エクスポート」しないため、少し注意が必要ですが、これらのプラグインのいずれかをエクスポート値として使用できます$.fn.popover。

{
    paths: {
        "bootstrap": "../bootstrap",
        "jquery": "../jquery-1.8.2"
    },
    shim: {
        "bootstrap": {
          deps: ["jquery"],
          exports: "$.fn.popover"
        }
    },
    enforceDefine: true
}
于 2012-11-25T23:51:03.753 に答える
14

shim でマジックを行う代わりに、ブートストラップ JS をモジュールに変換しました。

define([ "jquery" ], function($) {
  // bootstrap JS code
});

CDN から jQuery を取得したため、フォーラムやスタックオーバーフローで見つけた他のすべての機能が機能しませんでした。http://requirejs.org/docs/api.htmlの requireJS doc で説明されているように、問題に遭遇したためだと思います

ビルドで CDN の読み込みと shim 構成を混在させないでください。シナリオ例: CDN から jQuery をロードしますが、shim 構成を使用して、jQuery に依存するバックボーンのストック バージョンのようなものをロードします。ビルドを行うときは、必ずビルド ファイルに jQuery をインライン化し、CDN からロードしないでください。それ以外の場合、バックボーンはビルドされたファイルにインライン化され、CDN で読み込まれた jQuery が読み込まれる前に実行されます。これは、shim 構成が依存関係が読み込まれるまでファイルの読み込みを遅らせるだけで、定義の自動ラップを行わないためです。ビルド後、依存関係は既にインライン化されており、shim 構成は、define() されていないコードの実行を後まで遅らせることはできません。定義（）' d モジュールは、依存関係が読み込まれるまで実行されない define factory 関数でソースを適切にラップするため、ビルド後に CDN で読み込まれたコードで動作します。教訓: shim config は、非モジュラー コード、レガシー コードの応急処置です。define() されたモジュールの方が優れています。

ブートストラップを通常の AMD モジュールに変換し、shim 構成を削除すると解決しました。唯一の欠点: ブートストラップ CDN からブートストラップを取得できません。

于 2013-03-15T19:01:12.543 に答える
11

プロジェクト内でこの構成を使用します。

startup.js

require.config({
    paths: {
        /* other paths are omitted */
        'bootstrap': '../libs/bootstrap'
    },
    shim: {
        'bootstrap/bootstrap-slider': { deps: ['jquery'], exports: '$.fn.slider' }, 
        'bootstrap/bootstrap-affix': { deps: ['jquery'], exports: '$.fn.affix' },
        'bootstrap/bootstrap-alert': { deps: ['jquery'], exports: '$.fn.alert' },
        'bootstrap/bootstrap-button': { deps: ['jquery'], exports: '$.fn.button' },
        'bootstrap/bootstrap-carousel': { deps: ['jquery'], exports: '$.fn.carousel' },
        'bootstrap/bootstrap-collapse': { deps: ['jquery'], exports: '$.fn.collapse' },
        'bootstrap/bootstrap-dropdown': { deps: ['jquery'], exports: '$.fn.dropdown' },
        'bootstrap/bootstrap-modal': { deps: ['jquery'], exports: '$.fn.modal' },
        'bootstrap/bootstrap-popover': { deps: ['jquery'], exports: '$.fn.popover' },
        'bootstrap/bootstrap-scrollspy': { deps: ['jquery'], exports: '$.fn.scrollspy'        },
        'bootstrap/bootstrap-tab': { deps: ['jquery'], exports: '$.fn.tab' },
        'bootstrap/bootstrap-tooltip': { deps: ['jquery'], exports: '$.fn.tooltip' },
        'bootstrap/bootstrap-transition': { deps: ['jquery'], exports: '$.support.transition' },
        'bootstrap/bootstrap-typeahead': { deps: ['jquery'], exports: '$.fn.typeahead'  },
    }
});

require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.init();
    });
});

次に、私のコードでこれを使用します：

define(['jquery', 'underscore', 'backbone', 'text!templates/photos-list.html'], function($, _, Backbone, html) {
    var PhotosListView = Backbone.View.extend({
        viewImageFullscreen: function(e) {
            e.preventDefault();

            require(['bootstrap/bootstrap-modal', 'text!templates/photo-modal.html'], function(modal, htmlModal) {
                 var modalTemplate = _.template(htmlModal, options);
                 $('body').append(modalTemplate);

                 // setup
                 $(selector + '_modal').modal({
                     backdrop: true,
                     keyboard: true,
                     show: false
                 }).css({
                     'width': function() { return ($(document).width() * 0.55) + 'px'; },
                     'margin-left': function() { return -($(this).width() * 0.5); }
                 });

                 // trigger `modal` 
                 $(selector + '_modal').modal('show');
             }); // require() call
         // ...
于 2013-09-25T13:54:35.703 に答える
4

@lexeme & @benjaminbenben シムを作成し、jQuery を必要とし、jQuery を返す RequireJS プラグインにこの概念をラップして、これを手動で含める必要がないようにするにはどうすればよいでしょうか?

ブートストラップ コンポーネントを使用するには、次のようにします。

define(['bootstrap!tooltip'], function($){
  $('[data-toggle="tooltip"]').tooltip();
});

そして、このrequire-bootstrap-pluginを使用して機能させます。

于 2014-05-25T17:09:50.123 に答える