6

RequireJS の私の開発構成 (「index.html」ファイル内) は次のとおりです。

<script src="require-2.1.5.min.js"></script>
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: 'libraries/angular-1.1.5.min',
            jquery: 'libraries/jquery-2.0.0.min',
            underscore: 'libraries/underscore-1.4.4.min',
            ...
            zeroclipboard: 'plugins/zeroclipboard-1.0.7.min',
            tablesorter: 'plugins/jquery.tablesorter-2.9.1.min',
            ...
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'index',
                location: 'app/index',
                main: 'main'
            }
        ]
    });

    require(['index']);
</script>

しかし、本番環境では、ライブラリとプラグイン用に連結されたファイルが 2 つしかありません。

js/libraries.js // all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated
js/plugins.js // all plugins (already an AMD modules, no need for "shim" config) concatenated

では、どのように設定「パス」を記述すればよいでしょうか? 「libraries/angular-1.1.5.min.js」やその他のパスはありません。

私の解決策は次のように書くことです:

    paths: {
        angular: 'libraries',
        underscore: 'libraries'
    }

AngularJS と Underscore を「libraries.js」ファイルに関連付けると、すべてが完璧に機能します。(jQuery とすべてのプラグインは必要ありません。それらは既に AMD モジュールです)。

しかし、それは正しいパスの書き方ですか? 私の解決策は、ベストプラクティスの解決策ではなく、ちょっと汚い回避策のように思えます。

私の r.js ビルド プロセス:

({
baseUrl: 'scripts',
paths: {
    jquery: 'jquery-2.0.0.min',
    ...
    tablesorter: 'jquery.tablesorter-2.0.5.min',
    zeroclipboard: 'zeroclipboard-1.0.7.min'
},
name: 'foo/main',
exclude: [
    'angular',
    'jquery',
    ...
    'tablesorter',
    'zeroclipboard'
],
optimize: 'uglify',
out: 'production/js/foo.js'
})

更新 1:

私が欲しいもの:

www.mysite.com/about.html:

<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //-->
<script src="js/plugins.js"></script><-- all AMD //-->
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: WHAT I NEED TO WRITE HERE?,
            underscore: WHAT I NEED TO WRITE HERE?
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'about',
                location: 'js',
                main: 'about'
            }
        ]
    });

    require(['about']); // will load "js/about.js"
</script>

更新 2:

「優先度」については明らかなので、最初と 2 番目の «script» タグは必要ありません (ただし、"Require.js" と "libraries.js" を分ける必要があります) — RequireJS はそれらを自動的に読み込みます。しかし、「libraries.js」ファイル内の AMD 以外のライブラリはどうすればよいのでしょうか?

AngularJS と UnderscoreJS は非 AMD モジュールです。そのため、「shim」を使用する必要がありますよね? しかし、「シム」を機能させるには、「パス」も使用する必要があるため、「シム」はシムされたモジュールを見つけることができますよね? しかし、まだ「libraries.js」というファイルが 1 つしかなく、「path」オプションでそれを書き込めません…本当に行き詰まってしまいました…</p>

4

2 に答える 2