摘要：概述強(qiáng)大靈活的運(yùn)用是通過(guò)配置文件決定的。下面通過(guò)示例來(lái)進(jìn)行深度的探討配置文件的使用。配置文件的位置配置文件的位置和聲明用法是相對(duì)于這個(gè)腳本文件來(lái)決定的。配置文件參數(shù)的介紹所有模塊的查找根路徑。

Requires強(qiáng)大靈活的運(yùn)用是通過(guò)配置文件決定的。通過(guò)配置文件我們可以給模塊取別名、給模塊加上版本標(biāo)識(shí)、設(shè)置模塊依賴、包裝非模塊等強(qiáng)大功能。同時(shí)RequireJS的優(yōu)化器也大量使用了配置選項(xiàng)，如果你使用grunt、gulp等構(gòu)建工具的話，也有必要深入的學(xué)習(xí)配置文件的使用。

下面通過(guò)示例來(lái)進(jìn)行深度的探討配置文件的使用。

配置文件的位置和聲明用法是相對(duì)于Requires這個(gè)腳本文件來(lái)決定的。假如配置文件在Requires腳本的下方，則可以這樣使用：

這種情況一般都是把配置參數(shù)寫到require.config里面。如果配置文件在Requires腳本的上面，則是另外一種用法了，示例代碼如下所示：

這種情況下由于require.js后加載，那么直接使用require.config就會(huì)報(bào)錯(cuò)，這時(shí)候就只能通過(guò)聲明一個(gè)全局的變量來(lái)注入配置參數(shù)來(lái)實(shí)現(xiàn)了。

這時(shí)，你可能會(huì)發(fā)問(wèn)了，改用那種情況呢？我只能說(shuō)根據(jù)你具體的業(yè)務(wù)來(lái)選擇某種場(chǎng)景。配置是活的，人也是活得。業(yè)務(wù)也是活的，所以這個(gè)沒有統(tǒng)一的答案，再有甚者，你可以兩個(gè)結(jié)合使用。

除了要注意配置文件的位置要靈活使用之外，以下有幾點(diǎn)還是要注意的，這算是最佳實(shí)踐吧。

配置文件多帶帶成一個(gè)文件，不要跟具體的業(yè)務(wù)模塊耦合。

最好使用 var require = {} 的形式而不是 window.require = {}的形式。后者在IE中運(yùn)行不正常。

在決定配置位置后，下面就是配置文件的參數(shù)了，RequireJS包含了大量的參數(shù)，這也是配置文件的核心，具體明細(xì)如下。

所有模塊的查找根路徑。所以上面的示例中，"my/module"的標(biāo)簽src值是"/another/path/my/module.js"。當(dāng)加載純.js文件(依賴字串以/開頭，或者以.js結(jié)尾，或者含有協(xié)議)，不會(huì)使用baseUrl。因此a.js及b.js都在包含上述代碼段的HTML頁(yè)面的同目錄下加載。

如未顯式設(shè)置baseUrl，則默認(rèn)值是加載require.js的HTML所處的位置。如果用了data-main屬性，則該路徑就變成baseUrl。（所以最佳實(shí)踐還是推重使用baseUrl）

baseUrl可跟require.js頁(yè)面處于不同的域下，RequireJS腳本的加載是跨域的。唯一的限制是使用text! plugins加載文本內(nèi)容時(shí)，這些路徑應(yīng)跟頁(yè)面同域，至少在開發(fā)時(shí)應(yīng)這樣。優(yōu)化工具會(huì)將text! plugin資源內(nèi)聯(lián)，因此在使用優(yōu)化工具之后你可以使用跨域引用text! plugin資源的那些資源。

path映射那些不直接放置于baseUrl下的模塊名(這相當(dāng)于跟冗長(zhǎng)的模塊名取個(gè)簡(jiǎn)介的名字)。設(shè)置path時(shí)起始位置是相對(duì)于baseUrl的，除非該path設(shè)置以"/"開頭或含有URL協(xié)議（如http:）。在上述的配置下，"some/module"的script標(biāo)簽src值是"/another/path/some/v1.0/module.js"。

用于模塊名的path不應(yīng)含有.js后綴，因?yàn)橐粋€(gè)path有可能映射到一個(gè)目錄。路徑解析機(jī)制會(huì)自動(dòng)在映射模塊名到path時(shí)添加上.js后綴。在文本模版之類的場(chǎng)景中使用require.toUrl()時(shí)它也會(huì)添加合適的后綴。

在瀏覽器中運(yùn)行時(shí)，可指定路徑的備選(fallbacks)，以實(shí)現(xiàn)諸如首先指定了從CDN中加載，一旦CDN加載失敗則從本地位置中加載這類的機(jī)制。（回調(diào)函數(shù)，這個(gè)可以跟蹤腳本加載是否成功。）

ps:paths映射的模塊不一定是標(biāo)準(zhǔn)的AMD模塊，但是最佳實(shí)踐推薦是有意義的模塊。

為那些沒有使用define()來(lái)聲明依賴關(guān)系、設(shè)置模塊的"瀏覽器全局變量注入"型腳本做依賴和導(dǎo)出配置。

下面有個(gè)示例，它需要 RequireJS 2.1.0+，并且假定backbone.js、underscore.js 、jquery.js都裝于baseUrl目錄下。如果沒有，則你可能需要為它們?cè)O(shè)置paths config：

requirejs.config({
    //Remember: only use shim config for non-AMD scripts,
    //scripts that do not already call define(). The shim
    //config will not work correctly if used on AMD scripts,
    //in particular, the exports and init config will not
    //be triggered, and the deps config will be confusing
    //for those cases.
    shim: {
        "backbone": {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ["underscore", "jquery"],
            //Once loaded, use the global "Backbone" as the
            //module value.
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        },
        "foo": {
            deps: ["bar"],
            exports: "Foo",
            init: function (bar) {
                //Using a function allows you to call noConflict for
                //libraries that support it, and do other cleanup.
                //However, plugins for those libraries may still want
                //a global. "this" for the function will be the global
                //object. The dependencies will be passed in as
                //function arguments. If this function returns a value,
                //then that value is used as the module export value
                //instead of the object found via the "exports" string.
                //Note: jQuery registers as an AMD module via define(),
                //so this will not work for jQuery. See notes section
                //below for an approach for jQuery.
                return this.Foo.noConflict();
            }
        }
    }
});

//Then, later in a separate file, call it "MyModel.js", a module is
//defined, specifying "backbone" as a dependency. RequireJS will use
//the shim config to properly load "backbone" and give a local
//reference to this module. The global Backbone will still exist on
//the page too.
define(["backbone"], function (Backbone) {
  return Backbone.Model.extend({});
});

RequireJS 2.0.*中，shim配置中的"exports"屬性可以是一個(gè)函數(shù)而不是字串。這種情況下它就起到上述示例中的"init"屬性的功能。 RequireJS 2.1.0+中加入了"init"承接庫(kù)加載后的初始工作，以使exports作為字串值被enforceDefine所使用。

那些僅作為jQuery或Backbone的插件存在而不導(dǎo)出任何模塊變量的"模塊"們，shim配置可簡(jiǎn)單設(shè)置為依賴數(shù)組：

requirejs.config({
    shim: {
        "jquery.colorize": ["jquery"],
        "jquery.scroll": ["jquery"],
        "backbone.layoutmanager": ["backbone"]
    }
});

但請(qǐng)注意，若你想在IE中使用404加載檢測(cè)以啟用path備選(fallbacks)或備錯(cuò)(errbacks)，則需要給定一個(gè)字串值的exports以使loader能夠檢查出腳本是否實(shí)際加載了(init中的返回值不會(huì)用于enforceDefine檢查中)：

requirejs.config({
    shim: {
        "jquery.colorize": {
            deps: ["jquery"],
            exports: "jQuery.fn.colorize"
        },
        "jquery.scroll": {
            deps: ["jquery"],
            exports: "jQuery.fn.scroll"
        },
        "backbone.layoutmanager": {
            deps: ["backbone"]
            exports: "Backbone.LayoutManager"
        }
    }
});

"shim"配置的重要注意事項(xiàng):

shim配置僅設(shè)置了代碼的依賴關(guān)系，想要實(shí)際加載shim指定的或涉及的模塊，仍然需要一個(gè)常規(guī)的require/define調(diào)用。設(shè)置shim本身不會(huì)觸發(fā)代碼的加載。

請(qǐng)僅使用其他"shim"模塊作為shim腳本的依賴，或那些沒有依賴關(guān)系，并且在調(diào)用define()之前定義了全局變量(如jQuery或lodash)的AMD庫(kù)。否則，如果你使用了一個(gè)AMD模塊作為一個(gè)shim配置模塊的依賴，在build之后，AMD模塊可能在shim托管代碼執(zhí)行之前都不會(huì)被執(zhí)行，這會(huì)導(dǎo)致錯(cuò)誤。終極的解決方案是將所有shim托管代碼都升級(jí)為含有可選的AMD define()調(diào)用。

"shim"配置的優(yōu)化器重要注意事項(xiàng):

您應(yīng)當(dāng)使用 mainConfigFile build配置項(xiàng)來(lái)指定含有shim配置的文件位置，否則優(yōu)化器不會(huì)知曉shim配置。另一個(gè)手段是將shim配置復(fù)制到build profile中。

不要在一個(gè)build中混用CDN加載和shim配置。示例場(chǎng)景，如：你從CDN加載jQuery的同時(shí)使用shim配置加載依賴于jQuery的原版Backbone。不要這么做。您應(yīng)該在build中將jQuery內(nèi)聯(lián)而不是從CDN加載，否則build中內(nèi)聯(lián)的Backbone會(huì)在CDN加載jQuery之前運(yùn)行。這是因?yàn)閟him配置僅延時(shí)加載到所有的依賴已加載，而不會(huì)做任何define的自動(dòng)裝裹(auto-wrapping)。在build之后，所有依賴都已內(nèi)聯(lián)，shim配置不能延時(shí)執(zhí)行非define()的代碼。define()的模塊可以在build之后與CDN加載代碼一并工作，因?yàn)樗鼈円褜⒆约旱拇a合理地用define裝裹了，在所有的依賴都已加載之前不會(huì)執(zhí)行。因此記住：shim配置僅是個(gè)處理非模塊(non-modular)代碼、遺留代碼的將就手段，如可以應(yīng)盡量使用define()的模塊。

對(duì)于本地的多文件build，上述的CDN加載建議仍然適用。任何shim過(guò)的腳本，它們的依賴必須加載于該腳本執(zhí)行之前。這意味著要么直接在含有shim腳本的build層build它的依賴，要么先使用require([], function (){})調(diào)用來(lái)加載它的依賴，然后對(duì)含有shim腳本的build層發(fā)出一個(gè)嵌套的require([])調(diào)用。

如果您使用了uglifyjs來(lái)壓縮代碼，不要將uglify的toplevel選項(xiàng)置為true，或在命令行中不要使用 -mt。 該選項(xiàng)會(huì)破壞shim用于找到exports的全局名稱。

ps:shim配置是所有配置中最繁瑣也是最容易出問(wèn)題的選項(xiàng)，我一般用來(lái)處理css依賴，最佳實(shí)踐是能不用，盡量不用shim配置。

對(duì)于給定的模塊前綴，使用一個(gè)不同的模塊ID來(lái)加載該模塊。

該手段對(duì)于某些大型項(xiàng)目很重要：如有兩類模塊需要使用不同版本的"foo"，但它們之間仍需要一定的協(xié)同。 在那些基于上下文的多版本實(shí)現(xiàn)中很難做到這一點(diǎn)。而且，paths配置僅用于為模塊ID設(shè)置root paths，而不是為了將一個(gè)模塊ID映射到另一個(gè)。

map示例：

requirejs.config({
    map: {
        "some/newmodule": {
            "foo": "foo1.2"
        },
        "some/oldmodule": {
            "foo": "foo1.0"
        }
    }
});

如果各模塊在磁盤上分布如下：

foo1.0.js

foo1.2.js

some/

newmodule.js

oldmodule.js

當(dāng)“some/newmodule”調(diào)用了“require("foo")”，它將獲取到foo1.2.js文件；而當(dāng)“some/oldmodule”調(diào)用“`require("foo")”時(shí)它將獲取到foo1.0.js。

該特性僅適用于那些調(diào)用了define()并將其注冊(cè)為匿名模塊的真正AMD模塊腳本。并且，請(qǐng)?jiān)趍ap配置中僅使用絕對(duì)模塊ID，“../some/thing”之類的相對(duì)ID不能工作。

另外在map中支持“*”，意思是“對(duì)于所有的模塊加載，使用本map配置”。如果還有更細(xì)化的map配置，會(huì)優(yōu)先于“*”配置。示例：

requirejs.config({
    map: {
        "*": {
            "foo": "foo1.2"
        },
        "some/oldmodule": {
            "foo": "foo1.0"
        }
    }
});

意思是除了“some/oldmodule”外的所有模塊，當(dāng)要用“foo”時(shí)，使用“foo1.2”來(lái)替代。對(duì)于“some/oldmodule”自己，則使用“foo1.0”。

PS:map提供了統(tǒng)一腳本，不同版本的支持。

常常需要將配置信息傳給一個(gè)模塊。這些配置往往是application級(jí)別的信息，需要一個(gè)手段將它們向下傳遞給模塊。在RequireJS中，基于requirejs.config()的config配置項(xiàng)來(lái)實(shí)現(xiàn)。要獲取這些信息的模塊可以加載特殊的依賴“module”，并調(diào)用module.config()。示例：

requirejs.config({
    config: {
        "bar": {
            size: "large"
        },
        "baz": {
            color: "blue"
        }
    }
});

//bar.js, which uses simplified CJS wrapping:
//http://requirejs.org/docs/whyamd.html#sugar
define(function (require, exports, module) {
    //Will be the value "large"
    var size = module.config().size;
});

//baz.js which uses a dependency array,
//it asks for the special module ID, "module":
//https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
define(["module"], function (module) {
    //Will be the value "blue"
    var color = module.config().color;
});

若要將config傳給包，將目標(biāo)設(shè)置為包的主模塊而不是包ID:

requirejs.config({
    //Pass an API key for use in the pixie package"s
    //main module.
    config: {
        "pixie/index": {
            apiKey: "XJKDLNS"
        }
    },
    //Set up config for the "pixie" package, whose main
    //module is the index.js file in the pixie folder.
    packages: [
        {
            name: "pixie",
            main: "index"
        }
    ]
});

PS: config在我的項(xiàng)目中沒有被用到過(guò)，不過(guò)值得關(guān)注，另外對(duì)于第二種情況，本人不太熟悉，后期會(huì)開一篇文章介紹。

從CommonJS包(package)中加載模塊。參見從包中加載模塊。（鏈接：http://requirejs.cn/docs/commonjs.html）

PS：目前還沒遇到這樣的場(chǎng)景，關(guān)注中...

Node treats module ID example.js and example the same. By default these are two different IDs in RequireJS. If you end up using modules installed from npm, then you may need to set this config value to true to avoid resolution issues。

(翻譯：Node對(duì)待模塊example.js和example是一樣的.默認(rèn)在RequireJS中有兩個(gè)不同的標(biāo)識(shí)。如果你通過(guò)npm安裝且使用模塊結(jié)束，那么你可能需要設(shè)置這個(gè)參數(shù)為true來(lái)避免這個(gè)問(wèn)題。)

在放棄加載一個(gè)腳本之前等待的秒數(shù)。設(shè)為0禁用等待超時(shí)。默認(rèn)為7秒。

命名一個(gè)加載上下文。這允許require.js在同一頁(yè)面上加載模塊的多個(gè)版本，如果每個(gè)頂層require調(diào)用都指定了一個(gè)唯一的上下文字符串。想要正確地使用，請(qǐng)參考多版本支持一節(jié)。

指定要加載的一個(gè)依賴數(shù)組。當(dāng)將require設(shè)置為一個(gè)config object在加載require.js之前使用時(shí)很有用。一旦require.js被定義，這些依賴就已加載。使用deps就像調(diào)用require([])，但它在loader處理配置完畢之后就立即生效。它并不阻塞其他的require()調(diào)用，它僅是指定某些模塊作為config塊的一部分而異步加載的手段而已。

在deps加載完畢后執(zhí)行的函數(shù)。當(dāng)將require設(shè)置為一個(gè)config object在加載require.js之前使用時(shí)很有用，其作為配置的deps數(shù)組加載完畢后為require指定的函數(shù)。

如果設(shè)置為true，則當(dāng)一個(gè)腳本不是通過(guò)define()定義且不具備可供檢查的shim導(dǎo)出字串值時(shí)，就會(huì)拋出錯(cuò)誤。參考在IE中捕獲加載錯(cuò)誤一節(jié)。

如果設(shè)置為true，則使用document.createElementNS()去創(chuàng)建script元素。

RequireJS獲取資源時(shí)附加在URL后面的額外的query參數(shù)。作為瀏覽器或服務(wù)器未正確配置時(shí)的“cache bust”手段很有用。使用cache bust配置的一個(gè)示例：

urlArgs: "bust=" +  (new Date()).getTime()

在開發(fā)中這很有用，但請(qǐng)記得在部署到生成環(huán)境之前移除它。

指定RequireJS將script標(biāo)簽插入document時(shí)所用的type=""值。默認(rèn)為“text/javascript”。想要啟用Firefox的JavaScript 1.8特性，可使用值“text/javascript;version=1.8”。

Introduced in RequireJS 2.1.9: If set to true, skips the data-main attribute scanning done to start module loading. Useful if RequireJS is embedded in a utility library that may interact with other RequireJS library on the page, and the embedded version should not do data-main loading.

(翻譯：在2.1.9中被引入：如果設(shè)置為true,就會(huì)跳過(guò)data-main屬性的掃描啟動(dòng)模塊的加載。如果RequireJS嵌入到一個(gè)通用的庫(kù)中以其他頁(yè)面中的RequireJS交互，且嵌入的版本不會(huì)使用data-main加載)

PS:翻譯不標(biāo)準(zhǔn)，請(qǐng)告知，另外這個(gè)屬性用的不多，暫時(shí)沒什么實(shí)踐經(jīng)驗(yàn)。

官網(wǎng)：http://requirejs.org/docs/api.html#config
中文翻譯：http://requirejs.cn/docs/api.html#config

ps:翻譯不標(biāo)準(zhǔn)、涉及文章侵權(quán)、文章有錯(cuò)誤的地方請(qǐng)告知。