私は複数ページのプロジェクトで RequireJS を使用していますが、Javascript フォルダー構造は次のようになっています (Markdown でこれらのファンシーなディレクトリ ツリーをどのように作成しますか?)。
common.js
lib/
-- jquery-1.9.1.min.js
-- modernizr-2.6.2.min.js
-- underscore-amd.min.js
page/
-- index.js
-- start.js
-- checkout.js
とにかく、common.js構成パラメーターを設定するメインのスクリプト ファイルです。これは次のようになります。
common.js ファイル
// Configure RequireJS
requirejs.config({
baseUrl: "assets/js/lib",
paths: {
page: '../page',
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
//If the CDN location fails, load from this location
'jquery-1.9.1.min'
],
modernizr: [
'//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
//If the CDN location fails, load from this location
'modernizr-2.6.2.min'
],
underscore: [
'underscore-amd.min'
]
}
});
すべてのページ呼び出しは (CDN の場所が読み込まれている状態で) 期待どおりに機能しますが、縮小部分については理解できません。Underscore に CDN が指定されていなくても、r.jsオプティマイザは単純に協力を拒否し、 をスローします。Error: paths fallback not supported in optimizer. Please provide a build config path override for underscore
build.js ファイル
{
appDir: '../www',
baseUrl: 'js/lib',
dir: '../www-built',
mainConfigFile: '../www/assets/js/common.js',
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name: '../common',
include: ['jquery',
'modernizr',
'underscore'
]
},
// Now the page scripts
{
//module names are relative to baseUrl/paths config
name: '../page-index',
include: ['page/index'],
exclude: ['../common']
},
],
paths: {
jquery: "empty",
modernizr: "empty"
},
optimize: "uglify2",
removeCombined: true
}
common.jsこのプロジェクトをビルドして、個々のページ スクリプトと共にスクリプトを作成する方法を教えてください。
(注:この例build.jsに基づいてファイルの構造を作成しました
更新しました！
正しい構文を含めるように質問を更新しましたempty:（Travisに感謝します！）、ビルドはエラーなしで実行されるようになりました。ただし、私の JS ファイルは連結されていないか、醜いものではありません。CSS ファイルはインポート ポイントにあるので、何かが起こっています。以下の完全なbuild.jsファイル (申し訳ありませんが、彼女は背が高いです):
{
appDir: '../www',
baseUrl: 'assets/js', // relative to appDir
dir: '../www-built',
mainConfigFile: '../www/assets/js/common.js',
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name: 'common',
//List common dependencies here. Only need to list
//top level dependencies, "include" will find
//nested dependencies.
include: ['jquery',
'modernizr',
'underscore',
'bootstrap'
]
},
//Now set up a build layer for each page, but exclude
//the common one. "exclude" will exclude nested
//the nested, built dependencies from "common". Any
//"exclude" that includes built modules should be
//listed before the build layer that wants to exclude it.
//"include" the appropriate "app/main*" module since by default
//it will not get added to the build since it is loaded by a nested
//require in the page*.js files.
{
//module names are relative to baseUrl/paths config
name: 'pages/home',
include: ['pages/home'],
exclude: ['common']
},
{
//module names are relative to baseUrl/paths config
name: 'pages/start',
include: ['pages/start'],
exclude: ['common']
},
{
//module names are relative to baseUrl/paths config
name: 'pages/checkout',
include: ['pages/checkout'],
exclude: ['common']
},
],
paths: {
jquery: "empty:",
modernizr: "empty:"
// underscore: "empty:"
},
optimize: "uglify2",
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false
}
最終更新 (Yaay! It's working)
以下の Travis のおかげで、すべてがうまく機能しています。（ファイルは縮小および連結されています）。彼のソリューションは Dropbox でホストされており、将来失われる可能性があるため (amirite を知っている人はいますか?)、彼が行った修正を要約します。
1. 1つのファイルに複数の呼び出しを混在defineさせないでください。require
私はそれらを次のように混合したいくつかのファイルを持っていました:
ページ/start.js
define(['jquery','underscore'],function($,_) {
...
});
require(['jquery','page/start'], function($, Y) { // BAD!
...
});
修正はこれを行うことでした：
ページ/start.js
require(['jquery','app/start_helper'], function($, Y) {
...
});
app/start_helper.js
define(['jquery','underscore'],function($,_) {
...
});
2. そうで"empty:"はない"empty"
RequireJS のドキュメントでは言及されていますが、これは難しい問題です。
3.なぜなら
箇条書きが 2 つしかないリストは何ですか?
素晴らしい - 今では魅力のように動作します:)